Cara Buat Tombol Hide and Show (Spoiler)

Tomblo Hide and show lebih populer dengan sebutan Spoiler. Mungkin, dari namanya saja "Hide and Show" sobat blogger sudah tau fungsi dari tombol ini. Tidak tau? Ya sudah, saya jelaskan sedikit. Hide dalam bahasa Indonesia berarti menyebunyikan dan Show dalam bahasa Indonesia berarti menunjukkan. Jadi, tombol Spoiler berfungsi untuk menyembunyikan teks, Link atau gambar. Spoiler ini sangat bermamfaat buat blog karena dengan adanya spoiler, kita bisa mengemat tempat kalau kita gunakan saat menulis artikel dan bisa menghemat tempat juga kalau kita gunakan sebagai Widget atau Gadget. Tempatkan kode Hide and Show atau spoiler pada tempat yang diinginkan (Kolom Postingan atau Kolom HTML/Java Script)

<div><div style="margin-bottom: 2px;"><i><b><small>Coba di Klik</small></b></i><input value="Show" style="margin: 0px; padding: 0px; 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;">

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI  

</div></div></div> 

Hasilnya akan terlihat seperti di bawah ini

Coba di Klik

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI

Tambahan :
Jangan lupa mengganti "TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI" dengan gambar, link atau tulisan yang akan disembunyikan

Baca tutorial menarik lainnya di bawah ini :

Tips Trik Blog

• Membuat Teks Link Berkedap Kedip
• Cara Membuat Salam Pembuka Blog
• Membuat Gambar di setiap Artikel Secara Otomatis SEO
• Membuat Judul Blog Berada di Tengah
• Cara Buat Tulisan Berjalan / Effect Marquee di Blog
• Cara Memasang Facebook Like Badge
• Cara Menyembunyikan Navbar Blog
• Cara Menampilkan Judul Artikel Saja di Home Page Blog
• Cara Menambahkan Syntax Highlighter pada Blog
• Cara Menghias Cursor Blog
• Blog dan Google Chrome
• Contact Us
• Cara Pasang Alexa Traffic Widget
• All About Anchor Text
• Cara Buat Navbar Auto Hide
• Cara Pasang Yahoo Emoticon di Blog
• Ayo Tukar Link!!!
• Cara Backup atau Download Template Blog Sendiri
• Cara Menambahkan Link Blog kita pada Widget Attribution
• Menghilangkan Bayang atau Border Pada Gambar Blog
• Cara Membuat Widget Berjalan atau Bergerak
• Cara Menyembunyikan Widget Attribution Power By Blogger
• Menyembunyikan / Menghilangkan Posted by, Share Button (Tombol Berbagi) dan Labels di Home Page
• Cara Buat Related Post atau Artikel Terkait