Cara Membuat Spoiler di Blog

Sobat blogger, jika kita ingin menghemat space halaman posting supaya tidak terlalu panjang ke bawah, maka spoiler merupakan salah satu jawabannya. Spoiler adalah salah satu cara untuk menyembunyikan seluruh atau sebagian isi dari posting, baik gambar ataupun teks biasa, dengan menggunakan spoiler maka loading blog juga terasa tidak terlalu berat. Tutorial kali ini adalah bagaimana membuat spoiler dan memasangnya di postingan blog atau boleh juga dipasang di sidebar.

Berikut langkah-langkah untuk membuatnya :

1. Jika sobat ingin menyembunyikan widget di sidebar maka setelah masuk ke tab rancangan, sobat tinggal edit gadget tempat widget tersebut di tempatkan, tambahkan kode di bawah, ganti tulisan warna merah dengan kode dari widget sobat. 






Jika sobat ingin menyembunyikan text atau gambar pada postingan maka pada postingan sobat pilih edit html.
Selanjutnya masukkan kode di bawah, dan ganti tulisan warna merah dengan text atau kode gambar sobat.





2. Untuk kode spoilernya, silahkan sobat buka spoiler di bawah ini.


<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
GANTI TULISAN INI DENGAN TEKS ATAU GAMBAR YANG AKAN DISEMBUNYIKAN DI DALAM SPOILER
</div>
</div>
</div>

Demikian cara membuat dan memasang spoiler di postingan atau di sidebar blog, semoga bermanfaat.

Artikel Terkait :