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://kutu-blogspot.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...

Sekian tutorial tentang Widget Blogroll Show Hide.