Membuat Tombol Hide-Show/ Spoiler

Kali ini membahas tentang cara membuat tombol hide-showatau juga lebih dikenal dengan istilah spoiler. manfaat daritombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain. Misalnya saja teman-teman punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah teman-teman bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya teman-teman. Selain itu tombol spoiler ini tidak hanya berguna untuk tulisan atau teks, akan tetapi juga berguna untuk gambar, serta objek-objek yang dapat ditampilkan di blognya teman-teman yang menggunakan jasa javaScript/ kode HTML.

Bagi teman-teman yang belum tahu cara memasangnya, bisa dilakukan melalui langkah-langkah berikut ini:

1. Login ke blogger.com.
2. Klik Tata Letak/Rancangan.
3. Klik Tambah Gadget/ Add Gadget.
4. Pilih HTML/JavaScript.
5. Masukkan kode berikut ini, dan jangan lupa klik simpan:

</span><div><div style="margin: 5px;"></div><div><div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/></div><div></div></div><div><div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"></div><div><div style="display: none;"></div><div><br /></div><div>Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat</div><div><br /></div><div></div></div></div></div>

Mudah-mudahan bermanfaat.

Keywords:Membuat Tombol Hide Show, cara membuat spoiler untuk blogger, how to make spoiler

Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal

Share |

Related Post