Widget Blogroll Show Hide

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(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Link Sahabat&#39;; }" 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...

Sekian tutorial tentang Widget Blogroll Show Hide.