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.
    Widget Blogroll Show Hide
  • Klik Add a Widget dan pilih HTML/Javascript.
    Widget Blogroll Show Hide
  • 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.
    Widget Blogroll Show Hide
    Selesai...
Sekian tutorial tentang Widget Blogroll Show Hide.

0 komentar