Spoiler pada Posting Blogspot

Ada 3 kode yang di perlukan untuk bisa membuat spoiler pada posting blogger seperti ini

Jadi kita bisa menyembunyikan teks atau gambar di sini.

Kode pertama untuk CSS,

.commenthidden {display:none;}
.commentshown {display:inline;}

letakkan SEBELUM ]]></b:skin>

Kedua letakkan javascriptnya,


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

SETELAH ]]></b:skin> kemudian simpan.

Langkah yang ke-3, menuju menu Settings kemudian buka tab formatting. Letakkan kode berikut

<a aiotitle="click to expand" href="javascript:togglecomments('NAMA_SPOILER')">EXPAND</a><div class="commenthidden" id="NAMA_SPOILER">LETAKKAN TEKS ATAU GAMBAR YANG TERSEMBUNYI DI SINI</div>

di kotak post template (paling bawah) sehingga tiap kali kita posting baru, kode tersebut sudah ada di tab Edit HTML.

Cara penggunaannya silakan ganti NAMA_SPOILER dengan nama yang unik (terserah, yang penting sama). Ganti EXPAND dengan kata-kata yang nantinya diklik. Kemudian letakkan kata yang tersembunyi diantara tag div. Bisa juga spoiler tersebut diletakkan di dalam spoiler

seperti ini

atau saya menyebutnya double spoiler.

Masih bingung? Mumets? Ada cara memasang spoiler yg lain.

walaupun kodenya lebih panjang :D

Caranya tinggal pasang saja kode di bawah ini pada setiap kali kita posting. Atau seperti langkah yang ke-3 di atas.


<div id="spoiler">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'EXPAND'; }" style="font-size: 12px; margin: 10px; padding: 0px; width: 100px;" type="button" value="EXPAND" />
<div id="show" style="background-color: transparent; background-repeat: repeat; border-style: solid; border-width: 1px; display: none; margin: 0px; padding: 4px; width: 95%;">MASUKKAN KATA-KATA ATAU GAMBAR YANG TERSEMBUNYI DI SINI</div>
<div id="hide">
</div>
</div>

Ganti kata EXPAND dengan kata pembuka dan CLOSE dengan kata penutup tombol spoiler.

Posting ini hanya sebagai arsip aja, sudah banyak yang posting serupa :)


Thanks to

categories and apurie for this code.