6 Agustus 2011

Membuat spoiler di blog itu mudah

Nah, tips trik blog kali ini, masih 'sejenis', yaitu masih seputar sembunyi-menyembunyikan. Gakpapa yang penting jangan anak orang aja yang disembunyiin. Hihihihi...
Trik blog lama sebenarnya. Tapi, Ayas yakin, belum banyak yang tau. Padahal, penggunaan spoiler pada postingan blog, sangat berguna lo...

Spoiler sendiri, seperti yang banyak dipakai pada forum2, berfungsi untuk menyembunyikan gambar pada postingan. Gambar akan muncul, bila diklik tombol yang telah disediakan.

Fungsinya untuk Sodara dan blog? Tentunya akan menghemat tempat, jika pada postingan Sodara terdapat banyak gambar, apalagi klo sang gambar tu gede. Dan tentunya, menghemat waktu loading page.

Nah, langsung aja, untuk membuat spoiler pada postingan blog, berikut kodenya :


<div style="margin-bottom: 2px;">Judul Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">ISI SPOILER</div></div></div>



Jadi, tinggal copas aja, lalu ganti 'Judul Spoiler' dengan judul spoiler Sodara, dan 'ISI SPOILER', tentunya dengan isi spoiler Sodara. Contoh penggunaan kode diatas, hasilnya akan seperti ini :

Judul Spoiler
ISI SPOILER

Tidak ada komentar:

Posting Komentar