Membuat Spoiler pada Blog (buka tutup)

Selamat datang di daneyyy.blogspot.com

Membuat spoiler atau tombol buka/tutup pada blog yang dapat disimpan dalam postingan atau bisa juga di sidebar. Selain mempengaruhi akses blog, dengan adanya spoiler juga bisa menghemat tempat. Cara membuatnya cukup sederhana,

untuk lebih jelasnya silakan ikuti Tutorial di bawah ini :

Cara memasangnya :

Widget :

1. Login Blogger
2. Masuk ke Tata Letak >> Tambah Widget >> html Javascript
3. Masukan Codenya.


Posting : 


1. Login Blogger
2. Masuk ke buat posting
3. Taruh kode spoiler di HTML.
4. Terbitkan

  
Kode Spoiler Text :

<div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">

<div style="display: none;">Masukan Disini</div>

</div>

</div>

*Ganti yang berwarna merah dengan isi spoilermu.



Kode Spoiler Gambar

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEhqYweaPR7CsbnaVvo8PdfDEx8sY4UZho43Cw9zvg2-XAWcYYp_uWqD7DvG2yH8UJLuYnIHKGAi6JBtsKVHbw2YCEajc64fcrIKud-xCWjXsktc2MikJgdENt-IfWdMCqdNBzm5S1a0A/s1600/images.jpg" alt="monyet" width="300" height="280" /></div>
</div>
</div>

*Ganti yang berwarna merah dengan url gambar spoilermu.



Semoga bermanfaat :)