Cara Membuat Tombol Show Hide Spoiler

Halo kawan Good Friend, sekarang udah gak jamannya posting yang kebanyakan, jadi supaya gak kebanyakan makan tempat solusinya adalah, pake show hide spoiler, kalo kamu seorang kaskuser pasti kamu udah tau dunanya, tapi kalo kamu bukan kaskuser, kamu jadi tahu deh apa sih spoiler itu, hehehhe... sebenernya ni buat ringkas tempat aja, jadi ketika kamu tekan tombol show maka akan muncul semua, dan ketika kamu pencet tombol hide akan sembunyi deh, mau tahu cara bikinnya? langsung aja deh kalo gitu.. :D




tapi selain juga bisa mempersingkat ruang tulis pada posting, ternyata juga bisa digunakan untuk widget kita lho.. :D hebat yah, kalo gitu mari kita lihat cara caranya.. :D


untuk show/hide gadget :
1. login ke halaman blogger kamu
2. pilih tata letak kemudian pilih HTML/javascript
3. copy paste kode di bawah ini kedalamnya

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;"><br />isi spoiler<br /></span></div></div></div></div></div>



4. kemudian save deh


-----------------------------------------------------------------------------------


untuk show/hide posting:
1. login ke halaman blogger kamu
2. pilih entri baru dan tulis apa yang kamu inginkan
3. kalo udah copaste kode di bawah ini


<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;"><br />isi spoiler<br /></span></div></div></div></div></div>


4. Terbitkan entri, selesai

SELAMAT MENCOBA, JANGAN LUPA KOMENTARNYA