Cara Membuat Multi Tab Sidebar Blogspot Blogger

Membuat Multi Tab Sidebar di Blogspot Blogger 

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.

Langsug saja saya bagikan untuk Cara Memasang Multi Tab Sidebar

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} ... 

Selanjutnya silahkan salin code dibawah ini tepat diatas </body>.

 ...  ... 

Kemudian silahkan kalian terapkan code berikut ini  <div id='sidebar-wrapper'> pada template kalian.

... <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>

... 

Ganti nama judul widget sesuai yang kalian ingin buat.

Terakhir simpan template dan lihat hasilnya jika benar mengikuti sesui langkah-langkah diatas sharusnya bisa.

Demo

OPEN

HERE