Cara membuat tombol spoiler hidden dan show

Cara menghemat ruang yang dipakai dengan membuat tombol spoiler hidden dan show sepertinya cara ini cukup ampuh untuk mengakali ruang blog yang terbatas atau mempertahankan tampilan blog agar tetap ideal dan indah dipandang oleh pengunjung karena banyak blogger yang menggungulkan tampilan blognya mungkin tombol spoiler ini bisa jadi pilihan.

Karena kemarin sempat merubah tampilan blog ini saya jadi teringat untuk menambahkan buku tamu di blog saya ini coba anda lihat di sebelah kanan ada tombol bertuliskan buku tamu nah kali ini kita akan membahas mengenai tombol itu dan untuk yang penasaran silahkan simak baik-baik artikel ini hingga selesai.

Cara membuat tombol spoiler hiden dan show

karena disibukan menggarap beberapa blog baru saya hampir lupa untuk membuat post di blog ini ya karena sedikit bingung akan menulis apa saya putuskan untuk menulis cara membuat tombol spoiler di blog dan harapan nya artikel ini akan bermanfaat bagi yang belum tau mengenai hal ini.

untuk para member kaskus mungkin sudah tidak asing lagi untuk tombol yang satu ini karena banayak kaskuser yang menggunakan tombol spointer ini untuk menjaga tred nya agar tidak terlalu panjang dan acak-acakan dan mungkin tombol spoiler ini pun terinspirasi dari sana.

didalam tombol spoiler ini anda bisa menyisipkan bebagai jenis file seperti foto , vidio , atau mungkin menyisipkan buku tamu seperti saya dan saya rasa penggunaan tombol spoiler ini cukup efektiv jika anda gunakan pada posting untuk menyisipkan code html atau yang lain nya agar posting tidak terlihat terlalu panjang dan semerawut.

untuk memulai membuat nya pertama-tama silahkan copy code html dibawah ini:

Tombol spoiler 1

<div id="spoiler">
<div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" name="button" type="button" value="Yuli-Agustiani.info" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

KONTEN ANDA DISINI...

</div><div id="hide"></div></div></div>

Untuk contoh code di atas maka akan tampil seperti dibawah ini:

KONTEN ANDA DISINI...

keterangan:

• Untuk warna biru akan tampil di tombol
• Untuk warna merah silahkan isi dengan konten yang anda inginkan.

Tombol Spoiler 2

Jika anda hanya ingin menampilkan tombol nya berupa text maka anda harus gunakan code yang berbeda pula nah untuk itu codenya saya sudah sediakan dibawah ini silahkan copy dan paste code dibawah ini:

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Hide]</a><br /> ---REPLACE KONTEN DISINI GAN--- </span>

keterangan:

• Untuk warna biru akan tampil di tombol
• Untuk warna merah silahkan isi dengan konten yang anda inginkan.

mungkin untuk hal-hal lain nya bisa anda tambahkan sendiri di dalam nya karena isi dari tombol spoiler initergantung anda nantinya, bisa diisi dengan foto atau vidio adan atau mungkin code html, tombol spoiler ini sangat cocok dan efektif digunakan untuk blog yang memiliki nice mengenai tutorial seputar blog karena sering banyak memberikan code html didalam nya.

jika ingin memasang nya di widget namun belum tau cara memasang nya silahkan baca cara memasang widget html/java script di blog semoga membatu anda dan mungkin tutorialnya hanya sampai disini saja terima kasih telah membaca artikel saya yang berjudul cara membuat tombol spoiler hiden dan show semoga artikel ini menambah wawasan dan ilmu bagi pembacanya, jangan lupa tinggalkan konemtar ya.