Cara Membuat Widget Multi Tab Pada Sidebar Blogspot

Tidak terasa sudah 2 tahun lebih saya tidak pernah posting di blog ini, tidak kebayang waktu yang begitu lama, karena saya terlalu sibuk dengan pekerjaan dunia nyata. Ok, tanpa basa-basi saya akan membagikan sedikit tutorial tentang bagaimana Cara Membuat Widget Multi Tab Pada Sidebar Blogspot. Seperti gambar dibawah ini!

Cara Membuat Widget Multi Tab Pada Sidebar Blogspot

Apabila anda memiliki widget di blog yang cukup banyak, maka dengan memasang multi tab ini akan menghemat ruang yang ada di sidebar blog kalian. Jadi widget yang ada di sidebar blog anda akan terlihat lebih rapi, menarik, dan tidak terlalu memanjang kebawah. Tutorial ini saya dapatkan dari pengalaman saya selama bermain di dunia blogging. Cara ini mungkin sudah banyak yang membahasnya, Tapi jika anda belum mengetahuinya silahkan ikuti langkah-langkah berikut.
  1. Login ke blogger
  2. Pilih Template
  3. Klik Edit HTML
  4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
  5. /* Multi Tab Widget */
    .multitab-section {width:100%}
    .multitab-widget {list-style:none;margin:0;padding:0}
    .multitab-widget li {float:left;margin:0;padding:0;list-style:none;cursor:pointer}
    .multitab-widget li a {background:-moz-linear-gradient(top,#bbbbbb,#cccccc);font-family: 'Cabin', sans-serif;font-weight:normal;font-size:14px;font-style:italic;color:#000000;margin:0;padding:5px 0;display:block;text-decoration:none}
    .multitab-tab {width:33.334%;text-align:center;border:0}
    .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none}
    .multitab-widget li a.multitab-widget-current {background:-moz-linear-gradient(top,#356ba4,#3a76b4);color:#ffffff;padding:5px 0;margin:0;text-decoration:none}
    .multitab-widget-content {margin:0;padding:26px 0 0 0}
  6. Selanjutnya letakkan kode di bawah ini tepat di atas kode </body>
  7. <script type='text/javascript'>
    //<![CDATA[
    // Multi tab widget
    jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
    //]]>
    </script>
  8. Selanjutnya letakkan kode di bawah ini tepat di bawah kode <div id='sidebar-wrapper'>
  9. <div class='multitab-section'>
    <ul class='multitab-widget multitab-widget-content-tabs-id'>
    <li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
    <li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
    <li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
    </ul>
    <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'/>
    </div>
    <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'/>
    </div>
    <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'/>
    </div>
    </div>
  10. Terakhir Simpan Template kalian

Perhatian :
  • Ganti tulisan yang berwarna biru sesuai dengan judul widget yang akan anda pasang.

Mungkin hanya Cara Membuat Widget Multi Tab Pada Sidebar Blogspot yang dapat saya bagikan kali ini. Semoga bermanfaat.

5 comments:

  1. Ngapain aja tuh gan 2 tahun gak ngeblog..? :-D

    ReplyDelete
    Replies
    1. Haha kepo agan nih :D
      Kan sudah saya katakan dipostingannya.

      Delete
  2. Gan utk kode a href='#multicolumn-widget-id1' itu diubah gak ?
    Soal ny muncul url nya. contoh blog http://xdsd.blogspot.com ,jd munculnya http://xdsd.blogspot.com/#multicolumn-widget-id2 tabs ny not work gmn ya?

    ReplyDelete
  3. mantap kunjungi : http://takutsex.com

    ReplyDelete

 
© Copyright 2016 Lingga Mendunia. All Rights Reserved | Powered by Blogger.com
Created by Lingga Novandra