Cara Membuat Spoiler di Blog

Cara membuat spoiler - Spoiler adalah sebuah tombol yang akan menyembunyikan widget / gadget atau tulisan. Jika tombol spoiler di klik, maka tulisan atau widget yang tersembunyi akan di tampilkan. Jika di klik lagi maka widget atau tulisan tersebut akan di sembunyikan kembali. Artikel ini tidak berhubungan dengan postingan BB sebelumnya yaitu "Cara Menghapus Broken Link". Agar tidak terlalu tegang menghapus link rusak, saya tulis artkel untuk mempercantik blog yaitu "Cara Membuat Spoiler di blog"

Gambar 1 : Cara Membuat Spoiler

Contoh / Live Demo tombol spoiler di blog yang terpasang di postingan atau di dalam artikel blog, bisa anda lihat di artikel "Cara Membuat Daftar Isi Blog Otomatis". Untuk melihat contoh Spoiler yang lain, anda bis lihat di bagian paling bawah blog ini, tepatnya di bagian komentar blog ( Selama template BLOGGER BUGIS belum di edit / berubah ).

Cara Membuat Spoiler

Untuk membuat spoiler, kode yang digunakan adalah :

<div style="font-family: verdana; margin-top: 5px; text-align: center;">
<input 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 = 'Tutup'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = 'none'; this.innerText = ''; this.value = 'Buka Kembali'; }" style="font-size: 12px; margin: 0px; padding: 3px 5px;" type="button" value="Buka" /></div>
<div style="margin: 0px; padding: 1px;">
<div style="display: none;">
Kode Isi Disini
</div>
</div>

Keterangan :

• Verdana = Jenis Huruf tulisan pada tombol Spoiler. Ganti dengan Trebuchet ms, georgia, arial, atau jenis huruf lain yang anda inginkan
• 5 = Jarak tombol dari objek di atasnya. Ganti dengan angka yang lebih besar untuk membuatnya lebih jauh dari objek yang ada di atasnya atau sebaliknya
• center = Posisi / Letak tombol spoiler. Center berarti posisi tombol berada di tengah. Jika ingin membuat tombolnya berada di sebelah kiri, ganti center dengan Left, untuk sebelah kanan, ganti dengan right.
• Tutup = Tulisan pada tombol spoiler saat spoiler menampilkan widget atau tulisan yang di sembunyikan.
• Buka Kembali = Tulisan pada tombol spoiler saat widget atau tulisan tersembunyi tapi sebelumnya sudah pernah di buka / di tampilkan spoiler
• Buka = Tulisan pada tombol spoiler saat tulisan atau widget masih di sembunyikan oleh spoiler
• Kode Isi Disini adalah tulisan yang di sembunyikan oleh spoiler. Ganti dengan tulisan yang ingin anda sembunyikan dengan spoiler atau ganti dengan kode widget jika anda ingin menyembunyikan widget dengan spoiler

Untuk memasang Spoiler pada postingan atau artikel blog, anda harus memasang kode spoiler pada mode HTML ( Kecuali anda menggunakan "Tafsirkan HTML yang di ketik" pada menu pilihan yang ada di post editor blogspot ).

Sampai baris ini, tutorial cara membuat spoiler selesai. Sampai jumpa di artikel tips dan trik Blogger Bugis berikutnya. Salam Blogger......

sumber:http://www.bloggerbugis.com/2012/05/cara-membuat-spoiler_19.html