Hai all,
Dalam kesempatan kali ini saya akan share Cara Membuat Flat Multi Tab Sidebar Responsive di blogger /blogspot. multi tab maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post, Latest Post, dan Label, yang sejajar dalam satu space.
Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah. dan dibawah ini adalah steep by steepnya:
1. KODE CSS
Simpan di atas kode ]]></b:skin> atau </style>
/* Multi Tab Laros */
#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:15px;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#E74C3C}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}2. KODE HTML
Simpan di bawah kode<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' 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. Save Template!
4. Klik "Layout".Akan muncul tiga widget bertuliskan tab1, tab2, tab3. Jika belum muncul, refresh (tekan F5). Silakan isi dengan widget yang akan ditampilkan. Beres!
Demikian Cara Membuat Flat Multi Tab Sidebar Responsive di blogger semoga tutorial yang saya buat ini bisa bermanfaat & terima kasih sudah berkunjung ke blog sederhana Laros ini. Selamat mencoba :)
EmoticonEmoticon