Home » » Cara Membuat Tombol Spoiler Blog

Cara Membuat Tombol Spoiler Blog

Pasti anda sudah tau apa itu tombol spoiler, Tombol Spoiler berfungsi untuk menghemat ruang pada sidebar blog anda dengan cara meneyembunyikan konten yang ingin ditampilkan, namun bila tombol spoiler di klik maka konten akan terbuka, menarik bukan sebagai contohnya anda bisa lihat dibawah ini, yang saya simpan iyalah berupa foto.



Lihat Demonya Sobat :

Klik Show untuk melihat








Adapun kodenya adalah sebagai berikut :


<div><div style="margin-bottom: 2px;"><b><small>Klik Show untuk melihat</small></b>
<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;">
[LETAKKAN FOTO/KODE JAVASCRIPT ANDA DI SINI]
</div></div></div>



Pada Kode diatas anda bisa melakukan kustom dengan mengganti kalimat yang berwarna BIRU dan MERAH sesuai keinginan anda. Sedangkan kalimat yang berwarna HIJAU silahhkan anda hapus kemudian gantilah dengan Isi postingan maupun kode script widget anda, jumlah widget maupun image silahkan disesuaikan kebutuhan tidak ada batasannya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger