Hello sobat IcloudZer bagaiamana dengan kabar kamu hari ini, apakah sehat dan baik baik saja, semoga selalu di diberikan kesehatan oke, bagi kamu yang sedang sakit atau apalah semoga diberikan kesembuhan ok
Kali ini admin akan memberikan informasi seputar blogging dan tips terbaru mengenai perkembangan dunia blogger, nah pada sebelumnya kan admin telah membahas bagaiamana carannya membuat tombol spoiler dengan tampilan simple memgggunakan kode CSS, sekarang admin juga akan memberikan informasi mengenai bagaiamana caranya membuat spoiler dengan tampilan yang lebih keren, yang jelas berbeda dari artikel yang admin posting sebelumnya mengenai cara membuat tombol spoiler di blogger tersebut
Info: Oke jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama oke 😊
Tampilan Keren
Tombol spoiler kali ini apabila kamu terapkan didalam blog kamu, pastinya akan memiliki tampilan yang lebih keren dari pada postingan sebelumnya mengenai cara membuat tombol spoiler atau kotak spoiler diblogger
Info: Jika kamunya sudah penasaran bagaimana dengan tampilan spoilernya silahkan baca dan pelajari artikel ini hingga selesai agar tidak penasaran oke
Contoh Tampilan
Baiklah untuk contoh tampilan dari spoiler box atau spoiler buttonnya kamu bisa melihat contoh tampilan nya sebagai berikut
Info: Bagaiamana sobat dengan tampilan nya berbeda serta keren bukan dari tombol-tombol spoiler lainnya yang bertebaran di internet
Cara Pembuatan
Okay sekarang saatnya admin akan membahas bagaiamana carannya membuat tombol spoiler dengan tampilan yang berbeda serta lebih keren dari biasanya, simak dan pelajari artikel ini hingga selesai ok
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan adalah meletakkan dan menyimpan kode CSS dibawah ini untuk membuat tombol spoilernya
.Blog .rahSpoiler{border:2px solid #ebeced;border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.Blog .rahSpoiler .rahSpoiler-judul{outline:0;font-weight:700;font-family:Noto Sans, sans-serif;color:#161617;display:flex;}
.Blog .rahSpoiler{padding:20px 15px}
.Blog .rahSpoiler .rahSpoiler-judul{align-items:center}
.Blog .rahSpoiler .rahSpoiler-judul .button{margin:0 0 0 auto;padding:5px 15px;font-size:11px;font-weight:400;font-family:'Noto Sans', sans-serif;}
.Blog .rahSpoiler .rahSpoiler-judul .button:before{content:' Show all'}
.Blog .rahSpoiler .rahSpoiler-isi{max-height:0;margin-top:0;transition:all .2s ease;-webkit-transition:all .2s ease;overflow:hidden}
.Blog .rahSpoiler .rahSpoiler-isi p, .Blog .post .rahSpoiler .rahSpoiler-isi p{margin-top:10px}
.Blog .rahSpoiler .rahSpoiler-isi pre{margin:10px auto 0}
.Blog .rahSpoiler .rahSpoiler-input:checked + .rahSpoiler-judul .button:before{content:' Hide all'}
.Blog .rahSpoiler .rahSpoiler-input:checked ~ .rahSpoiler-isi{max-height:1000vh;margin-top:1em}Sebagai informasi: kamu bisa meletakkan kode CSS diatas tepat diatas kode ]]></b:skin> atau sebelum kode tersebut
Cara Penggunaan
Kemudian untuk menampilkan tombol spoilernya, kamu harus menggunakan kode HTML nya, pelajari cara menampilkan tombol spoiler diblogger denafn membaca artikel ini hingga selesai
Kode HTML
Salin kode HTML dibawah ini untuk menampilkan tombol spoilernya okok hehehe
<div class='rahSpoiler'>
<input class='rahSpoiler-input hidden' id='rahSpoilerr' type='checkbox'>
<div class='rahSpoiler-judul'>
<b>Judul Spoiler</b>
<label aria-label='rahSpoiler' class='button' for='rahSpoilerr'></label>
</div>
<div class='rahSpoiler-isi'>
<div>Isi spoiler</div>
</div>
</div>Sebagai informasi: Kamu bisa menggunakan kode HTML diatas pada saat kamu ingin menulis artikel diblog menggunakan mode HTML
Langkah Langkah
Sebagai pelengkap agar lebih detail pastinya kamu bisa melihat langkah langkah yang admin jabarkan untuk membuat tombol spoilernya
- Login keakun blogger kamu
- Pergi ke template kemudian piih edit HTML
- Salin dan letakkan kode CSS dibawah ini diatas kode ]]></b:skin>
- Gunakan kode HTML dibawah ini untuk menampilkan tombol spoiler oke
.Blog .rahSpoiler{border:2px solid #ebeced;border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.Blog .rahSpoiler .rahSpoiler-judul{outline:0;font-weight:700;font-family:Noto Sans, sans-serif;color:#161617;display:flex;}
.Blog .rahSpoiler{padding:20px 15px}
.Blog .rahSpoiler .rahSpoiler-judul{align-items:center}
.Blog .rahSpoiler .rahSpoiler-judul .button{margin:0 0 0 auto;padding:5px 15px;font-size:11px;font-weight:400;font-family:'Noto Sans', sans-serif;}
.Blog .rahSpoiler .rahSpoiler-judul .button:before{content:' Show all'}
.Blog .rahSpoiler .rahSpoiler-isi{max-height:0;margin-top:0;transition:all .2s ease;-webkit-transition:all .2s ease;overflow:hidden}
.Blog .rahSpoiler .rahSpoiler-isi p, .Blog .post .rahSpoiler .rahSpoiler-isi p{margin-top:10px}
.Blog .rahSpoiler .rahSpoiler-isi pre{margin:10px auto 0}
.Blog .rahSpoiler .rahSpoiler-input:checked + .rahSpoiler-judul .button:before{content:' Hide all'}
.Blog .rahSpoiler .rahSpoiler-input:checked ~ .rahSpoiler-isi{max-height:1000vh;margin-top:1em}Info: Jika sudah kamu bisa menyimpan Template nya
<div class='rahSpoiler'>
<input class='rahSpoiler-input hidden' id='rahSpoilerr' type='checkbox'>
<div class='rahSpoiler-judul'>
<b>Judul Spoiler</b>
<label aria-label='rahSpoiler' class='button' for='rahSpoilerr'></label>
</div>
<div class='rahSpoiler-isi'>
<div>Isi spoiler</div>
</div>
</div>Info: Gunakan kode HTML diatas pada mode HTML diblogger bukan mode Compose