Hello sobat Bloggermuda 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 Blogger dan tips terbaru mengenai perkembangan dunia blogger, nah pada sebelumnya kan admin telah membahas bagaiamana carannya membuat tombol spoiler box dengan tampilan simple memgggunakan kode CSS, sekarang admin juga akan memberikan informasi yang sama mengenai bagaiamana caranya membuat spoiler box dengan tampilan yang lebih keren dan berbeda dari postingan sebelumnya
Info: Oke jika kamu 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
.rahSpoiler{border:2px solid #ebeced;border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.rahSpoiler .rahSpoiler-judul{outline:0;font-weight:700;font-family:Noto Sans, sans-serif;color:#161617;display:flex;}
.rahSpoiler{padding:20px 15px}
.rahSpoiler .rahSpoiler-judul{align-items:center}
.rahSpoiler .rahSpoiler-judul .button{margin:0 0 0 auto;padding:5px 15px;font-size:11px;font-weight:400;font-family:'Noto Sans', sans-serif;}
.rahSpoiler .rahSpoiler-judul .button:before{content:' Show all'}
.rahSpoiler .rahSpoiler-isi{max-height:0;margin-top:0;transition:all .2s ease;-webkit-transition:all .2s ease;overflow:hidden}
.rahSpoiler .rahSpoiler-isi p, .post .rahSpoiler .rahSpoiler-isi p{margin-top:10px}
.rahSpoiler .rahSpoiler-isi pre{margin:10px auto 0}
.rahSpoiler .rahSpoiler-input:checked + .rahSpoiler-judul .button:before{content:' Hide all'}
.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