Cara Membuat Multi Tab Di Blog

Multi Tab

Salam blogger sekarang saya akan berbagi bagaimana Cara Membuat Multi Tab Di Blog seperti gambar di atas. Ok sekarang langsung
1. Sobat cari ]]></b:if>. Kemudian letakan kode di bawah ini tepat di atas kode yang sobat cari tadi.

/* CSS Multi Tab */
#sidebar-tab {border: 1px solid #d9d9d9;}#sidebar-tab h2{display:none;}#select-tab{margin:0 auto 10px}#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}#select-tab li{float:left;width:33.3%;text-align:center}#select-tab a{line-height:53px;display:block;background-color:#425967;color:white;font-size:12px;text-decoration:none}#select-tab .selected a{background-color:white;color:black;}#select-tab a:hover{background-color:#3cc091;color:#fff}#sidebar-main .widget1{padding:0 5px 5px 5px;float:left;}#sidebar-main{overflow:hidden}

2. Selanjutnya cari kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>. Kemudian letakan kode di bawah ini tepat di bawah kode yang sobat cari tadi.

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'><i aria-hidden='true' class='fa fa-star-o'>&#160;</i>POPULAR</a></li>
<li class='tab2'><a href='#tab2'><i aria-hidden='true' class='fa fa-tags'/>&#160;TAGS</a></li>
<li class='tab3'><a href='#tab3'><i aria-hidden='true' class='fa fa-rss'/>&#160;SUBSCRIBE</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

3. Kemudian save template dan lihat hasilnya.

Jika sobat kurang mengerti atau kurang memahami untuk meletakan kode-kode diatas sobat bisa komen di bawah. Semoga bermanfaat dan terimaksih