Membuat Spoiler ala Kaskus

MMenindaklanjuti request dari rekan WBC untuk menshare tips tentang membuat spoiler. Maka pada posting saya kali ini akan membahas tentang tips membuat spoiler ini. Apa itu spoiler? mungkin rekan WBC banyak yang sudah tahu. Spoiler di blog adalah sebuah tombol yang fungsinya menyembunyikan teks atau gambar di bawahnya. Contohnya adalah tombol Rekan WBC pada sidebar blog WBC. Saat diklik tombol tampilkan maka dibawahnya akan muncul kotak yang sebelumnya tersembunyi berisi textarea link-link dari rekan-rekan WBC.

Berminat ingin membuatnya? Berikut tipsnya.

Untuk Blogspot

Seperti biasa login acoount blogger Anda. kemudian masuk Tata Letak > Elemen Laman.

Pada sidebar pilih Tambah Gadget > HTML/Java Script.

Masukkan kode dibawah ini :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler
</div></div></div></div>

Hasilnya :

Judul

isi spoiler

Nah tugas rekan WBC mengedit sesuai kebutuhan teks yang saya cetak berwarna biru.Cukup mudah bukan? Jika ada kesulitan silahkan meninggalkan komentar.





Untuk Wordpress

Bagi rekan WBC yang ingin memasang spoiler di blog berplatform wordpress, kodenya adalah seperti di bawah ini :

<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: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
teks/HTML gambar/embed video yang disembunyikan
</div>
</div>

Hasilnya :

teks/HTML gambar/embed video yang disembunyikan

Ganti teks yang bercetak biru sesuai kebutuhan rekan WBC. Silahkan berkreasi sendiri apa saja yang ingin rekan WBC isi dalam sisi spoiler itu, bisa Text, HTML, Image atau Video.



Sekedar narsis, dibawah ini adalah contoh spoiler yang pada isi spoiler saya beri image foto saya beserta link menuju blog saya,hehe.. Kodenya adalah :
<a href="http://www.danisetiyawan.blogspot.com/" taget="_blank"><img src="http://img708.imageshack.us/img708/7436/dhnzmgs116.jpg" border="0" alt="Blog Motivasi | Dani Setiyawan"></a>
Hasilnya seperti ini :

Cah Ngganteng Dewe >

Semoga bermanfaat n enjoy blogging.