Cara Membuat Sidebar Multi Tab Menu Blogger
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDtr_33r1h5Ooak9w_WBrJn0RNezesulC42Kf9N8rTKC-XtuQl96OdHchGl33OwHAasWgfdG3xwXVhZhIuZVacM3k64ty-_VM3FVyI0nOxGTneQB64kpmDZ9oczZIgQHh12K-y84yjkh1/s320/ice_screenshot_20210216-000713.png)
Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah.
1. Pertama Cara Memasang:1). Masuk Ke blogger kalian
2). Pilih Menu Tema lalu klik Edit Html
3). Cari
jika sudah ketemu pastekan kode dibawah ini tepat diatas/dalam kode
Tambahkan CSS
/* By https://ztncoding.blogspot.com */
#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:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}
2. Kedua
Cari
Tambahkan HTML
<!-- By https://ztncoding.blogspot.com -->
<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>
Klik Simpan![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIhWI3hBmL6r3wJoOv4SoSH9B_ynvYsZAokLZkanqnQ8p96npYZhI5PaU1MNH3WzwcxQdUOhn-vLid_pIYdUrg1QTXclhon2xpB-X2vGZ2U11Q8sgFwCFr5UGXIurG_5KNFf2DquDDv_H/s320/ice_screenshot_20210216-000812.png)
akan muncul tiga widget di Tata Letak Bertuliskan tab1, tab2 dan tab3, silahkan isi disetiap widget itu.
Posting Komentar untuk "Cara Membuat Sidebar Multi Tab Menu Blogger"
Posting Komentar