Membuat Tabulasi Widget Sidebar Otomatis

Membuat Tabulasi Widget Sidebar Otomatis - Membuat tabulasi widget ini sudah sangat
banyak di share di blog, bahkan tutorialnya pun sudah bertebaran di google, tapi apa salahnya
saya membuat artikel ini dengan tujuan baik,Oh iya makasih buat dukungan nya karena
tanpa kalian mungkin gue kgak akan bisa update artikel lagi, Setelah kemarin saya share
artikel berjudul Nostalgia Blogger

Langkah Pembuatan :

1. Cari Kode </head> dan letakan kode dibawah ini diatas kode tersebut
*Note:Bagi yang sudah di pakai tidak usah di pasang

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

2. Letakan Script dibawah ini diatas script tadi

<script type='text/javascript'>
//<![CDATA[
var starttab = 0;
var endtab = 3;
var sidebarname = 'sidebar-wrapper';

var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul></div>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("hompitab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .hompitab").hide();$jtab1("#widg"+$jtab1(this).attr("id")).fadeIn();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>

3.Cari kembali Kode ]]></b:skin> dan letakan script ini diatasnya

/*
 * Modifikasi 3 Oktober 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 * (original: http://www.abu-farhan.com)
 */

.hompitab {
  position:relative;
  z-index:1;margin:0px 0px;
  padding:0px 0px;
  border:1px solid #ccc;
  background:#fff;
}

.hompitab .widget-content {
  margin:10px 15px !important;
}

ul.tab-wrapper {
  margin:15px 0 -10px 0;
  padding:0 0 0 0;
}

ul.tab-wrapper li {
  position:relative;
  z-index:0;
  cursor:pointer;
  background:#666;
  padding:6px 8px 5px;
  text-decoration:none;
  color:#ebebeb;
  font:bold 11px Arial,Sans-serif;
  text-shadow:0 1px rgba(0,0,0,0.4);
  display:inline;
  list-style:none !important;
  margin:0px 1px;
  text-transform:uppercase;
  -webkit-border-radius:3px 3px 0px 0px;
  -moz-border-radius:3px 3px 0px 0px;
  border-radius:3px 3px 0px 0px;
}

ul.tab-wrapper li.active-tab {
  border:1px solid #ccc;
  border-bottom-color:#fff;
  background:#fff !important;
  z-index:2;
  color:#666;
  text-shadow:none;
}

4. Ganti Kode Dibawah ini dengan ID SIDEBAR anda

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/>
          <b:widget id='Label1' locked='false' title='Media' type='Label'/>
          <b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/>
          <b:widget id='HTML4' locked='false' title='Label' type='HTML'/>
          <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
     </b:section>
</div>