Cara Memasang Multi Sidebar Widget

Cara Memasang Multi Sidebar Widget

Kali Ini Saya Membagikan Cara Memasang Multi Sidebar Widget Salah Satu Manfaat Dari Widget Ini Adalah Jika Sobat Sudah Menambahkan Terlalu... 19:55

Kali Ini Saya Membagikan Cara Memasang Multi Sidebar Widget

Salah Satu Manfaat Dari Widget Ini Adalah Jika Sobat Sudah Menambahkan Terlalu Banyak
Widget Di sidebar  Maka Dengan Memasang Multi Tab ini akan Menghemat
Penempatan Widget Kolom  Ok Langsung Saja Ke TKP HEHE

Simak Berikut

1.Masuk Bloggeer Sobat > Template> EDIT HTML Copy Kode Di bawah ini Dan Pastekan Diatas  ]]></b:skin> Atau </style>

  /* Multi Tab Widget */
.multitab-section{background:#FFFF;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#000000;color:#ffffff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}     

Selanjutnya Memasang Jquery Copy Kode DI bawah ini Pastekan di </body>

<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>

Kemudian Terapkan Kode Di bawah ini Paste di bawah  <div id='sidebar-wrapper'>

   <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'>Partner Blog</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>  

Ganti  Nama Judul Yang saya Kasih Tanda Di atas 


MAKASIH BERKUNJUNG