Jul 19, 2017

Cara Memasang Multi Tab Sidebar di Blogger

Multi tab sidebar
Dipostingan kali ini akan membahas seputar Widget yang sering dipasang pada sidebar blog. Widget ini sangat membantu pengunjung untuk dapat mengetahui isi dari Blog yang disajikan dan merupakan salah satu yang diwajibkan juga oleh Webmaster Google sebagai menu navigasi dalam blog.


Ada banyak ragam dan cara para blogger menampilkan Widget di Sidebar, yang biasa umumnya adalah widget Popular post, Recent Post dan Iframe Facebook fans page. Masalah muncul jika space yang ada di dalam sidebar tersebut terbatas untuk pemasangan widget pada sidebar.

Dipostingan kali ini akan kita bahas bersama Memasang Multi Tab Sidebar di Blogger yang mungkin bisa menjadi solusi atas permasalahan keterbatasan space pada sidebar blog sobat, disini akan dibahas cara membuat Multi Tab pada sidebar yang akan ditampilkan memanjang ke bawah dan dibagi menjadi tiga bagian tentunya akan membuat lebih rapih tampilan di sidebar. nah  bagi sobat yang mau mencoba memasangnya silahkan ikuti berikut ini Cara Memasang Multi Tab Sidebar di Blogger.


Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan kode ini tepat diatas ]]></b:skin> atau </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}


Langkah Ke Dua
Silahkan salin kode Jquery dibawah ini lalu letakkan diatas 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>


Langkah Ketiga
Silahkan salin kode HTML dibawah ini lalu letakkan tepat dibawah 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>

Perhatikan kode yang ditandai Popular, Tags, Archive silahkan sesuaikan dengan yang mau ditampilkan.


Perhatikan setiap langkah yang diberikan jika sudah sesuai silahkan SAVE dan selesai selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.