Buat Spoiler keren dengan CSS di Blog

Salam Blogging 

Kali ini saya juga akan mengupdate tentang Spoiler ,Seperti yang kalian ketahui Spoiler sendiri digunakan untuk mengurangi beban blog dan juga meminimaliskan blog .Saya pernah ingin membuat Spoiler di blog saya tapi kayakna di blog saya spoiler di blog saya gak akan berengaruh karna background template saya berwarna hitam . 
Langsung ajah ke Cara pembuatannya :


1.Login Ke Akun Blogger Anda

2. Masuk Ke Menu Template Anda

3. Klik Edit HTML > Lanjutkan

4. Lalu Cari Kode dibawah
]]></s:kin>
5. Copy Kode dibawah dan Pastekan Tepat diatas ]]></s:kin>

.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvBLgXtIACQ7Cy_uBdWtQRJje1r3wVdZX9sn2X_2ZzD8hO27Tuwklzn1tQR9aJVxfpEdHUXSI1H008HuhALt3OnPCKwZp21OREKwbUttGktx2bxJ_i6lvYoHT_kUBGz7AU8RKk1lNsjzKp/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left}

6. Setelah Langkah diatas Dilakukan Klik Simpan / Save

7. Sekarang Anda Ke Menu Tata Letak / Layout Blogger ya

8. Klik Tambah Gadget > Klik Tambah HTML/Javascript

<div class="spoiler"> <div class="spoirel">Judul Widget Anda<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget Anda</div> </div> </div>

#Ganti Teks  yang berwarna .

9. Jika Ingin Membuat Spoiler Lagi Tinggal Copy Paste Saja Lagi Kode diatas .

Nah bagaimana dengan artkel ini ,kirimkan saran melalui Komentar