Cara Membuat Multi Tab Secara Mudah Di Sidebar

Para Blogger umumnya terus mencari berbagai widget canggih untuk ditambahkan di blog mereka. Jika template kalian tidak ada widget multi tab bawaan, Maka cara ini cukup efektif untuk kalian ikuti. Multi tab salah satu widget yang paling keren, banyak file bisa ditempatkan dalam widget ini. Codingnya pun cukup singkat jika mengingat mega output. Begitu banyak fungsi dalam widget Multi tab simpel ini.  Dengan widget ini akan memudahkan pengunjung untuk mengakses lebih banyak pos.
Kalian dapat dengan mudah menempatkannya pada template dengan mengikuti langkah-langkah berikut.

Okelah kita langsung saja eksekusi.

Cara Membuat Multi Tab Secara Mudah Di Sidebar


1. masuk ke blog - pilih Template - edit templat dan cari kode  </head>
2.Copy script di bawah ini dan letakkan sebelum kode </head>

 <script 
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 
type='text/javascript'/>
<script type='text/javascript'>
// Multi tab  
jQuery(document).ready(function($){ 
$(".laimed").hide(); 
$("ul.blake li:first a").addClass("pointz").show(); 
$(".laimed:first").show(); $("ul.blake li a").click(function() { 
$("ul.blake li a").removeClass("pointz a"); $(this).addClass("pointz"); 
$(".laimed").hide(); var activeTab = $(this).attr("href"); 
$(activeTab).fadeIn();return false; }); });
</script> 

3. Cari kode]]></b:skin> dan letakkan CSS di bawah ini tepat diatas ]]></b:skin>

 /* Multi tab css setting */
.multitabs{text-transform:uppercase; margin:0 0px 30px; }
.kidder{list-style:none;margin:0 0 7px;padding:0; background: #f8f8f8; border-bottom:3px solid #2E9DD4; height:38px;}
.kidder li{list-style:none;padding:0;margin:0;float:left;}
.kidder li a{ display:block;padding:8px 14px;font-size:12px; font-weight:bold; text-decoration:none; color:#777}
.multitabs h2 {display:none;}
.kidder li a.pointz, .kidder li a:hover{background:#2E9DD4; color:#fff !important;text-decoration:none;}
.laimed li{border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:10px 3px !important; margin:0 !important; text-transform:none;}
.laimed li { background:none; list-style:none;}
.laimed img {width:65px;height:60px;float:left; padding:0px; margin:0 6px 0px 0;}
.PopularPosts .item-thumbnail{margin:0px;} 

Cari sidebar-wrapper dan letakkan HTML di bawah ini tepat di bawah sidebar-wrapper

 <div class='multitabs'>
<ul class='kidder blake'>
<li class='beez'><a href='#id1'>Popular</a></li>
<li class='beez'><a href='#id2'>Recent</a></li>
<li class='beez'><a href='#id3'>Comments</a></li>
</ul>
<div class='clear'/>

<!-- Tab Widget 1 -->
<div class='laimed' id='id1'>
<b:section class='sidebar' id='sidebaze1' preferred='yes'/>  
</div>

<!-- Tab Widget 2 -->
<div class='laimed' id='id2'>
<b:section class='sidebar' id='sidebaze2' preferred='yes'/>
</div>

<!-- Tab Widget 3 -->
<div class='laimed' id='id3'>
<b:section class='sidebar' id='sidebaze3' preferred='yes'/> 
</div>
</div>
<div class='clear'/> 
Simpan dan lihat hasilnya..

Share this with short URL:

Artikel Menarik Lainya:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser