Membuat Spoiler

Spoiler termasuk sebuah trik agar blog sobat tidak terlalu berat, yaitu bagi sobat yang merasa banyak postingan gambar yang memungkinkan proses loading blog sobat menjadi lambat. Hal itu dapat diatasi dengan menggunakan Spoiler. Mungkin sudah banyak yang ngebahas tentang spoiler ini, namun saya berniat untuk mengingatkan dan juga memberitahukan bagi sobat blogger yang belum mengetahui. Biar ingatan kita lebih fresh seperti apa bentuk spoiler itu lihat contoh dibawah.

Hanya Sebagai Pengingat Biar Fresh.

Lantas Bagaimana cara membuat spoiler tersebut ?, disini saya akan menggunakan 2 metode memasang spoiler yaitu metode penerapan langsung pada saat posting blog dan motode penanaman kode HTML pada template sobat

1. Cara yang pertama (langsung penulisan pada blogger sobat).
Cara ini sangatlah mudah, sehingga sobat tidak perlu merubah kode HTML pada template sobat, namun sobat harus bener-bener kode spoiler ini. Jika ingin mencoba silahkan Copy dan Paste code dibawah kedalam postingan sobat (pilihan mode HTML).
<div><input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Lihat"></div><div style="border: 1px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 400px;"><div style="display: none;">TEXT / GAMBAR SOBAT DISINI</div></div>

Pada kode diatas sobat dapat modifikasi sendiri dari ukuran kotak spoiler,warna background,border, dan tentu isinya serta tombol Lihat dan Tutup spoiler (bisa dengan gambar).
2. Cara kedua dengan merubah kode HTML Template Sobat.

- Masuk kedalam blogger area sobat --> Layout --> Edit HTML --> jangan lupa tandai Expand Widget Templates dan juga download (backup) template sobat sebelum merubah kode/menambah kode (biar ga bingung kalo ada kesalahan).
- Copy kode dibawah dan taruh diatas kode ]]></b:skin>

.commenthidden {display:none;}

.commentshown {display:inline;}

- Masukan kode berikutnya diantara ]]></b:skin> dan </head> atau taruh saja diatas </head> , dan kodenya adalah :

<script type='text/Javascript'>function togglecomments (postid) {var whichpost = document.getElementById(postid);if (whichpost.className=="commentshown") {whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }} </script>

- Save template sobat. Kemudian gimana cara penggunaan di postingan ??
- Saat membuat postingan sobat jangan lupa untuk memberikan kode dibawah :

<a aiotitle="click to expand" href="javascript:togglecomments('Nama_Spoiler')"><img class="spoiler" src="http://i655.photobucket.com/albums/uu275/kanzenk/showhide.png" /></a><div class="commenthidden" id="Nama_Spoiler">Gambar/Tulisan di taroh di sini</div>

Sudah cukup jelas sobat ?? kalau cara yang kedua ini nihh, untuk menampilkan beberapa spoiler sobat harus mengedit Nama_Spoiler yang berbeda agar tidak bentrok dalam penampilan gambar/text yg akan sobat tampilkan.

Nah ini contoh spoiler dengan model yang kedua :

Hanya Sekedar Test

Sobat, jika sobat bingung menggunakan cara yang kedua sobat gunakan cara yang pertama. Bagaimana sobat ? mau mencobanya ? Oke deh, selamat mencoba.