Cara Membuat Spoiler Buka/Tutup, Show/Hidden di Postingan Blog

Setelah posting tentang bagaimana Cara Mengatasi Loading Blog dengan Google Code,  pada kesempatan kali ini saya akan berbagi tips tentang bagaimana Cara Membuat Spoiler Buka/Tutup, Show/Hidden Di Postingan Blog. Bagi para kaskuser, fotografer[dot]net, dan forum - forum lainnya mungkin sudah tidak asing lagi dengan istilah Spoiler: Buka/Tutup,  Hidden/Show.
Spoiler merupakan suatu jendela yang bisa dibuka dan ditutup dengan menggunakan button/tombol yang bisa diatur sesuai dengan kehendak kita. Gimana, tertarikkah sobat untuk membuatnya?
Baiklah Untuk lebih jelasnya, perhatikan contoh berikut, silakan klik tombol Buka/Tutupnya

Tempat Postingan Anda. Entah itu bentuk gambar ataupun Script

Adapun fungsi spoiller adalah untuk mengefektifkan browser dalam loading halaman, karena pada saat spoiler belum diklik(show/buka) maka browse belum membuka  isi dari spoiler tersebut.

Jika anda tertarik untuk menerapkannya pada blog Anda, maka silakan lanjutkan membaca postingan ini!!!

Untuk membuat Spoiler buka/tutup atau show/hidden, sangatlah mudah, kita hanya menuliskan kode berikut ini pada postingan, tapi Jangan lupa harus menuliskan kode ini pada mode post editor "HTML"  jangan pada mode "Compose" Untuk dapatkan kodenya silakan Klik Buka:

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div><div style="padding:5px; text-align:justify;"><div style="display: none;">Tempat Postingan Anda. Entah Itu Bentuk Gambar Ataupun Script Yang Akan DiTampilkan Atau DiSembunyikan</div></div></div !akhir spoiler>

Keterangan:
Code: <div style="text-align: center;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau anda letakkan di tengah dengan code center. Untuk posisi kiri dengan code Left. Untuk di sisi kanan dengan code right. Ingat, hanya ubah yang berwarna merah saja.
Code: Tulisan  Buka-Tutup  yang berwarna merah, silakan anda ganti dengan kalimat sesuka hati anda. Contohnya kata "Buka-Tutup" digantikan dengan kata "Show-Hidden." Contohnya kira-kira seperti itu.
Code: width: 100px; Yang berwarna merah tersebut merupakan nilai ukuran lebar dari tombol Buka-Tutup tersebut.. Silakan juga anda ubah sesuai keinginan anda. Sekali lagi yang diubah nilainya saja ya...
Code: Isi Teks, Silakan ganti dengan isi Artikel anda atau terserah anda lah he..he..he..

Demikian postingan mengenai Cara membuat spoiler Buka/Tutup, Show/Hidden di postingan kali ini.
Silakan dicoba ya!!!

Sumber :http://harfly.blogspot.com/2013/03/cara-membuat-spoiler-bukatutup.html