Cara Membuat Widget Spoiler Buka Tutup pada Blog Cara Membuat Widget Spoiler Buka Tutup pada Blog

Widget spoiler adalah widget yang berfungsi untuk menyembunyikan tulisan atau gambar yang ingin dishare di dalam sebuah artikel postingan. Jadi tulisan atau gambar yang ada didalamnya jika diklik tombol spoilernya, maka gambar atau tulisan tersebut akan terlihat. Apa kelebihannya? Kelebihannya diantaranya adalah loading blog akan lebih ringan jika gambar pada blog diletakan di dalam spoiler, lalu kelebihan yang lainnya adalah akan menghemat tempat pada halaman yang diberi spoiler. Bagaimana cara membuatnya? Cara pembuatannya cukup muda, silahkan ikui langkah-langkah berikut untuk mencoba membuatnya.

Jika anda ingin menampilkan di postingan maka anda harus menuju ke postingan blog ada, caranya:

1.  Login ke blogger dan menuju ke dasbor blog anda.

2.  Pergi ke Posting lalu Entri Baru.

3.  Pilih Edit HTML bukan Compose, seperti pada gambar berikut.

4.  Lalu copy paste kode berikut ini di dalam kolom HTML.

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Lihat teks atau gambar</span></i><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 = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">......>>>>>Isi dari widget spoiler disini<<<<<......</div></div></div></div>

Keterangan:
Warna merah --> Menunjukan 

Warna biru --> Ganti dengan teks atau url gambar yang anda inginkan. Contoh spoilernya seperti berikut.

Lihat teks atau gambar

......>>>>>Isi dari widget spoiler disini<<<<<......

Source: http://superrefreshing.blogspot.com/2012/07/membuat-widget-spoiler-buka-tutup-pada.html#ixzz24tDLKVLM Under Creative Commons License: Attribution Non-Commercial No Derivatives

5.  Silahkan lanjutkan menulis posingan anda pada kolom Compose dan klik Terbitkan Entri jika sudah.

>>>Selamat Mencoba<<<