Membuat Spoiler pada Blog (buka tutup)




Selamat datang di daneyyy.blogspot.com

monyet
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="http://2.bp.blogspot.com/-I_dycNe8OK0/T2wTCtUA2rI/AAAAAAAAAQU/mq_CJ86gDRI/s1600/images.jpg" alt="monyet" width="300" height="280" /></div>
</div>
</div>

*Ganti yang berwarna merah dengan url gambar spoilermu.



Semoga bermanfaat :)


Share this article :
 

Posting Komentar

Silahkan berkomentar bila artikel diatas bermanfaat, serta untuk kemajuan blog ini.

1. Berkomentarlah dg kata-kata yang sopan dan tidak menyinggung.
2. Jangan menyertakan link saat berkomentar.
3. NO SARA !!!! NO SPAMMM !!!

Terima kasih :)

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Danie Sharra's Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger