Tips Blogger Cara Memasang Multi Tab Sidebar

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

Ada banyak ragam dan cara para blogger menampilkan Widget di Sidebar, yang biasa umumnya ialah widget Popular post, Recent Post dan Iframe Facebook fans page. Masalah muncul bila 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 sanggup menjadi solusi atas permasalahan keterbatasan space pada sidebar blog sobat, disini akan dibahas cara menciptakan Multi Tab pada sidebar yang akan ditampilkan memanjang ke bawah dan dibagi menjadi tiga bab tentunya akan menciptakan lebih rapih tampilan di sidebar. nah  bagi sahabat yang mau mencoba memasangnya silahkan ikuti berikut ini Cara Memasang Multi Tab Sidebar di Blogger.

Langsug saja aku bagikan untuk Cara Memasang Multi Tab Sidebar
Silahkan sahabat salin isyarat CSS dibawah ini kemudian letakkan isyarat ini sempurna 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 sempurna 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 jadinya bila benar mengikuti sesui langkah-langkah diatas sharusnya bisa.

Demo

OPEN

HERE

Bagikan Artikel ini