Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar blogging dan informasi informasi terbaru pastinya, oke kali ini admin akan membahas mengenai bagaiamana caranya membuat tombol atau text apapun yang diklik akan memunculkan konten pada saat diklik
Info:Baca hingga selesai agar lebih memahami mengenai artikel kali ini oke
Tombol Klik
Sebenarnya bukan cuma membuat tombol Tapi mulai dari Text, icon, dan apapunlah yang diklik akan memunculkan konten didalam Blogger, nah sebanrnya admin juga pusing memberikan judul atau nama dari fitur ini, yang penting saat kamu mengklik tombol tersebut akan memunculkan gambar ataupun kontenNya
Contoh Tampilan
Dari pada penasaran baiklah saya akan membuatkan contoh tampilan ataupun contoh demonya biar lebih detail, hehehe
Info: Sudah diklik dan bagaiamana dengan contoh tampilan nya, keren bukan
Cara pembuatan
Baiklah admin akan mulai membahas bagaiaman cara membuat tombol klik kemudian bisa memunculkan konten gamabr diblogger terbaru, okel
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkan diatas kode ]]></b:skin>
/* Tombol Click and Show ~ by Icloudice.com */
.rah-imginner{background-color:#fefefe;width:auto;height:auto;border:2px solid #f80000;padding:5px 3px 0 0;z-index:8px;border-radius:4px;opacity:1;visibility:hidden}
.rah-imginner .cnt{justify-content:center; align-items:center;margin-left:auto;margin-right:auto;margin-buttom:auto;margin-top:auto;}
.rah-imginner .cnt:before{content:'Icloudice.com';position:relative;color:#161617;margin:6px;}
.rah-imginner .cnt:after{content:'Made with Icloudice.com';display:flex;color:red;float:center; background-color;#fefefe;border:2px solid #ebeced;width:auto;margin:10px;margin-top:3px}.rah-imgiinner:checked + .rah-imginner .cnt{opacity:1;visibility:visible;display:block;}.rah-imgiinnner:checked ~ .rah-imginner .cnt{display:none}Kode HTML
Langkah selanjutnya adalah menyalin kode HTML dibawah ini kemudian letakkan kodenya dibawah kode <body>
<input class='rah-imgiinner hidden' id='rah-rah-imginner-open' type='checkbox'/>
<div class='rah-imginner'>
<div class='rah-imginner cnt'>
<!-- Letakkan gambarnya disini -->
</div></div>Kode Penggunaan
Jika sudah melakukan langkah langkah diatas, selanjutnya untuk menggunakan atau membuat tombolnya gunakan kode dibawah ini
<label for='rah-rah-imginner-open'>
Tuliskan Text anda disini
</label>Info: Kode Diatas bisa kamu letakkan dimana saja, bisa kamu gunakan didalam postingan, ataupun bisa kamu taruh didalam mode edit HTML