Membuat tombol spoiler box di Blogger menggunakan CSS

Hello sobat IcloudZer kembali lagi nih saya akan menjelaskan bagaimana Cara membuat Tombol spoiler di blog ataupun di website, pertama Tama apa itu Tombol sopiler?

Info: Bagi kamu yang sudah penasaran dengan pembahasan kita kali ini yakni cara membuat tombol spoiler mudah diblogger, yuk langsung aja kita bahas

Fungsi Tombol Spoiler

Tombol spoiler didalam sebuah blog atau website berfungsi untuk menyembunyikan Sebuah text dengan format atau induknya menggunakan Tombol, Ketika anda mengklik tombol tersebut maka Tampilan Text anda akan muncul

Contoh Tampilan

Nah apabila kamu telah menerapkan Tombol spoiler ini didalam blog kamu maka tampilannya akan seperti berikut ini

Contoh Tombol Spoiler

Nantinya Tuslisan anda akan tampil disini jika anda menerapkan kodenya pada situs blog anda

Info: Pada proses penerapan Tombol spoiler ini hanya dibuat dengan menggunakan kode CSS, maka tidak menghambat kelajuan situs blog anda

Oke kita akan masuk kecara penerapan nya, sebelum memulai lebih baik lakukan hal berikut sebagai kewaspadaan atau keamanan Template anda, yaitu backup atau cadangkan template anda terlebih dahulu

Cara penerapan

1. Login keakun blogger kamu
2. Pergi ke Template dan pilih edit html
3. Cari kode ]]></b:skin> kemudian letakkan kode CSS berikut tepat diatas kode tadi

/* Spoiler Box by Icloudice */
.rahSpo{display:block;margin:12px 0;border:5px solid #f80000;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
.rahSpo .tbl{background:#f80000;color:#fff;display:inline-block;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:0;border:none;outline:0;line-height:20px;border-radius:3px;-moz-border-radius:3px}
.rahSpo .tbl:focus{pointer-events:none}
.rahSpo .tbl:before{content:'Mau Lihat';display:inline-block;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
.rahSpo .tbl:focus::before{content:'Udah Lihat';background:#c00}
.rahSpo .cnt{background:#e4e4e4;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
.rahSpo .tbl:focus+.cnt{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease}

4. Kemudian simpan Template nya
5. Untuk cara penerapan pada postingan, Tulis kode dibawah pada mode Html di postingan

<b> Judul Spoiler Anda </b>
<div class="rahSpo">
<div class="tbl" tabindex="0"></div>
<div class="cnt">
<!--Isi Spoiler-->
Tuliskan Isi Spoiler anda disini
</div>
</div>

Warning: ⚠️ Ingat yak pada kode diatas ubah atau edit pada judul dan tuliskan isi spoiler anda

Baiklah sobat postingan saya kali ini, menurut saya sangat simple sekali untuk diterapkan pada situs blog anda, jika kurang mengerti tanyakan kepada saya melalui kolom komentar dibawah, berilah saran dan kritik anda jika memungkinkan, terimaksih