Widget Blogroll Show Hide

Diposkan oleh Unknown on 05 January 2012 at 1:15 PM

Widget Blogroll Show Hide | Tutorial Blog

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.

.:. 20 komentar .:.Post a Comment

  1. nice article gan, coba ah, hehehe

    Blogwalking gan, mohon kunjung dan follow balik ke review-newgadget.blogspot.com makasih ya

    ReplyDelete
  2. Butuh banget nih kode gan. Thanks gan

    ReplyDelete

  3. makasih infonya semoga bermanfaat gan

    ReplyDelete


  4. infonya sangat menarik untuk saya simak,, nice infonya gan. sukses terus!!!!

    ReplyDelete
  5. . artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  6. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga sukses...

    ReplyDelete
  7. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete
  8. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  9. . artikel yang sangat menarik dan tentunya sangat membantu saya dalam belajar, makasih banyak ya lam sukses selalu

    ReplyDelete


  10. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  11. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    ReplyDelete
  12. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  13. Obat Kencing Nanah Atau Gonore20 June, 2015 22:56

    Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom