Kali ini Saya akan mengembangkan perihal Cara Memasang Multi Tab Sidebar Widget yang mungkin pernah teman lihat di beberapa web yang menggunakannya.
Salah satu manfaat dari widget ini yaitu jikalau teman sudah menambahkan terlalu banyak widget di sidebar, maka dengan memasang multi tab ini akan menghemat penempatan widget di kolom sidebar yang biasanya memanjang ke bawah. Penempatan setiap widget pada sidebar ini dapat teman bagi menjadi beberapa kolom yang akan menciptakan blog teman menjadi lebih terlihat rapi dan menarik.
Langsung saja, cara penerapannya sebagai berikut :
Login ke Blogger > Klik Template > Klik Edit HTML > Salin instruksi di bawah ini sempurna di atas ]]></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 salin instruksi di bawah ini sempurna di atas </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>Kemudian terapkan instruksi di bawah ini sempurna di bawah <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>Ganti nama judul widget yang Saya beri tanda pada instruksi di atas sesuai dengan judul widget yang teman pasang.
Terakhir simpat template dan lihat hasilnya
Sekian tips Cara Memasang Multi Tab Sidebar Widget, selamat mencoba.