Hai sobat blogger!!! Tutorial blogspot kali ini akan menjelaskan bagaimana cara membuat tombol show/hide atau buka/tutup (spoiler) pada widget sidebar blogspot tanpa harus meng utak atik template blog sobat. kita langsung saja ke caranya...
1. Login ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman.
3. Klik add gadget ( tambah gadget )
4. Pilih HTML/Javascript'
5. Masukkan kode berikut kedalamnya.
<div><div style="margin-bottom: 2px;"><i><b><small>Klik Untuk melihat</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;">
Letakkan artikel, gambar atau apapun di sini
</div></div></div>
6. Klik Simpan.
Selesai...
di coba ya.. jika ada yang kurang, bertanyalah di kotak komentar.
Semoga membantu!!!!
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Subscribe to:
Post Comments (Atom)
9 comments
Write commentskalo widget nggak bisa disembunyiin/spoiler ya om?
Replywah.. mantab banget sob infonya. bermanfaat banget buat newbie seperti saya :)
Replyterima kasih ya info nya :D
Replybukankah...
Replyini juga HTML?
Blogspot Tutorial
Patut dicoba sob! Ijin bookmark dlu ya :)
Replyini spoilernya dengan gaya scroll tidak mas?
Replyini hanya memberikan efek spoiler pada isi widget (div class='widget-content') saja ya mas sedangkan pada title widgetnya dihilangkan. kalau fungsi spoiler digunakan untuk title widgetnya gimana mas?
ReplyBuset script nya singkat juga ya! THANKS :)
Replymakasih sob infonya. :D
Replykunjung balik ya..
http://tenlibrary.blogspot.com
EmoticonEmoticon