Meletakan Spoiler Pada Widget Blog Kita

Sebenarnya ini bisa diterapkan di semua blog dan website, diantaranya untuk Blogger, Wordpress, Joomla, maupun website lainnya. Seperti kita tahu, spoiler berguna untuk menyimpan / menyembunyikan kontent, jika ingin dilihat kontent tersebut, maka kita tinggal click. Berikut adalah langkah – langkahnya.

Pertama kita letakan script ini pada header kita antara

Ini dia scriptnya

<script language="javascript">
function show(obj)
{
var x = document.getElementById(obj);
if (x.style.visibility == "hidden") {
x.style.display = "block";
x.style.visibility = "visible";
}
else{
x.style.display = "none";
x.style.visibility = "hidden";
}
}
</script>
<!– kode css dibawah ini bisa juga disisipkan pada file css anda –>
<style type="text/css">
.Judul_Spoiler{ background:#D9D9D9; cursorointer; width:200px; border:inset 1px;}
.Isi_Spoiler{background:#F5F5F5; font-size:kecil; font-style:italic; display:none}
.kecil {font-size: small}
</style>

Perhatikan beberapa opsional dibawah ini:

.Judul_Spoiler{ background:#D9D9D9; cursorointer; width:200px;
kode #D9D9D9 merupakan kode untuk warna kotak atas spoilernya, anda bisa ubah warnanya sesuai yang diinginkan.
Sedangkan 200px adalah lebar spoiler ini, silahkan disesuaikan dengan widget blog anda, atau dapat diisi auto.

.Isi_Spoiler{background:#F5F5F5;
kode #F5F5F5 merupakan kode untuk warna background kotak isi spoilernya, anda bisa ubah warnanya sesuai yang diinginkan.

font-size:kecil; font-style:italic;
Merupakan style untuk font isi spoiler, silahkan dihapus jika tidak ingin style default. Selesai sudah tahapan awalnya

Kode Untuk Menampilkannya

Sekarang setiap kali kita ingin menampilkan spoiler kita, maka kita tinggal memasukan kode berikut pada content / widget kita.

<div class="Judul_Spoiler" onclick="show(’Spoilerkita’);">
Tulis judul spoiler disini, kode html dapat digunakan
<div id="Spoilerkita" class="Isi_Spoiler">
Ketikan isi dari spoiler disini, kode html atau javascript dapat digunakan didalam sini.
</div>

Spoiler ini cocok digunakan antara lain untuk menyimpan shoutbox yang panjang, bagi pengunjung yang ingin chat di shoutbox, mereka tinggal click spoilernya dan akan muncul.

Jika ada yang kurang jelas silahkan tinggalkan komentar disini, terima kasih.

Bagi yang punya blog ingin menjadi relawan, saya akan bantu memasangnya sekaligus biar bisa jadi contoh disini

Update:

Ini dia salah satu contohnya:

Peluang Usaha Dari Internet

Catatan:
Alternatif lain disamping menyimpan pada header, bisa mendownload filenya disini, kemudian diupload ke website anda.
Download Spoiler

Tambahan Snippet Spoiler Lainnya

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span 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.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Tutup Spoiler</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Buka Spoiler</a>'; }" /><a href="#" onClick="return false;">Buka Spoiler</a></span></div><div><div style="display: none;">
Isi spoiler dapat berupa html, javascript
</div></div></div>

Artikel yang mungkin terkait:

1. Memblokir Akses IP Address Tertentu Ke Website / Blog Kita
2. Meletakan Form Remote Upload Pada Fireboard
3. Tips Mengatasi Problem Akses Pada ISP Kita
4. Chat Widget Dari Yahoo Messenger