Membuat Widget Spoiler di Blog

• Login ke blogger
• Pilih tata letak, tambah gadget, pilih html/javascript
• Masukkan kode dibawah ini

<style type='text/css'>
#aks{background: #f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul Widget sobat<input 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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget sobat</div> </div> </div>

•  Kalau anda ingin membuat lebih dari 1 maka tinggal tambah kode nya di atas secara berurutan contoh :

<style type='text/css'>
#aks{background: #f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul 1<input 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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 1</div> </div> </div>

<div id="aks"> <div id="jud">Judul 2<input 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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 2</div> </div> </div> 

•  Simpan

sekian tutorial dari saya, Wassalamualaikum