Multi tab widget pada sidebar adalah sidebar blog berupa tab berisi beberapa tab, Namun para blogger biasanya memasangnya 2 sampai 3 tab saja. Pada multi tab ini kamu bisa menambahkan widget-widget seperti Postingan populer, Postingan Update, Label dan widget lainnya dalam satu space.
Dengan membuat multi tab pada sidebar dapat menghemat space sidebar tidak terlalu memanjang ke bawah. Sehingga blog kamu lebih enak dipandang dan lebih user friendly.
Baca Juga :
Kali ini admin akan berbagi tutorial cara membuat multi tab di sidebar blog. Caranya mudah sekali, tinggal ikuti langkah-langkah berikut. Mari kita simak baik dan terapkan secara teliti.
Cara Membuat Multi Tab Widget
Berikut kita akan membuat multi tab widget seperti gambar di bawah ini:
1. Pada Dashboard buka menu "Tema" lalu "Edit HTML".
2. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin> atau </style>.
/* Multi Tab by sharetutorgan.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:50%;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:#e8635f}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}
<!-- multitab widget by sharetutorgan.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</a></li>
<li class='tab2'><a href='#tab2'>Latest</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>
</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>
Demikian tutorial cara membuat multi tab widget di sidebar blog yang bisa kamu terapkan di blog kamu. Jika mengalami kesalahan, periksa kembali dengan teliti tutorialnya. Jangan lewatkan artikel seputar tutorial yang tersedia di Share Tutor Gan!!. Terima kasih telah berkunjung.