Cara Memasang Widget Multi Tab Pada Sidebar Blog

Cara Memasang Widget Multi Tab Pada Sidebar Blog

Blogdaffal.com-Cara Memasang Widget Multi Tab Pada Sidebar Blog-Multi Sidebar merupakan hal terpenting dalam menurunkan Bounce Rate pada Blog.Karena dengan adanya Multi Tab Widget pada Sidebar blog akan memudahkan pengunjung dalam menjelajahi blog dan artikel anda.

Multi Tab Widget juga berguna untuk mengirit space pada Sidebar Kanan template blog anda.Hal ini tentunya akan membuat sidebar kanan blog anda terlihat rapih dan teratur.Serta dapat menghemat Space agar tampilan blog tidak berantakan.Berikut saya akan memberikan tutorialnya.

~Login ke akun Blogger anda pilih "Template">"Edit HTML">dan salinlah kode di bawah ini tepat berada di atas kode ]]></b:skin> atau di atas kode <style>.

/* Multi Tab Widget */ .multitab-section{background:#fff;text-transform:uppercase;width:100%} .multitab-widget{list-style:none;margin:0 0 10px;padding:0} .multitab-widget li{list-style:none;padding:0;margin:0;float:left} .multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

~Selanjutnya silahkan masukkan juga kode di bawah ini tepat di atas kode </body>.

<script type='text/javascript'> //<![CDATA[ // Multi tab widget jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); //]]> 

</script>

~Terakhir tempatkan kdoe di bawah ini tepat berada di bawah kode <div id='sidebar-wrapper'>.

<div class='multitab-section'> <ul class='multitab-widget multitab-widget-content-tabs-id'> <li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li> </ul> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'/> </div> </div>

~Silahkan ganti tulisan yang di tandai dengan warna Biru dengan Label yang anda sukai dan ingin anda tambahkan.