Widget Blogroll Show Hide | Tutorial Blog
Blogroll adalah kumpulan pranala/hyperlink ke beberapa blog yang lain. Blogroll biasanya ditempatkan di baris samping (sidebar) homepage. Pada tutorial kali ini saya akan berbagi cara membuat blogroll dengan mode show-hide, sehingga akan lebih menghemat tempat.
Berikut cara membuat Widget Blogroll Show Hide :
- Login ke blogger, klik Design > Page Element.
- Klik Add a Widget dan pilih HTML/Javascript.
- Lalu letakkan kode berikut : <div class="widget-content"><div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><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 = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Link Sahabat'; }" value="Link Sahabat" style="margin: 0px; padding: 5px; width: 100%; font-size: 14px; background: none repeat scroll 0% 0% blue; border-radius: 8px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h4>Link Sahabat</h4></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>
<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>
</div></div><div style="text-align: right;"><font size="0.1">Widget by <a href="http://wadahtutorial.blogspot.com/" target="_blank">Tutorial Blog</a></font></div></div></div></div></div></div>Keterangan :blue : Warna latar, silakan diganti sesuai keinginan Anda.width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.<a href="http://alamatblog.com/" target="_blank">Text</a> : Ganti dengan kode link sahabat Anda. - Terakhir klik Save.
Selesai...
