Latest News

Cara Membuat Multi Tab Sidebar Widget Di Blogger Keren

Mungkin ada yang pernah melihat multi tab sidebar. Jika kalian belum pernah melihat multi tab sidebar widget berarti kalian boong alasannya yaitu di blog ini aku juga memakai multi tab widget di sidebar. Atau malah anda belum tahu apa itu multi tab sidebar. Dilihat dari namanya aja udah kelihatan kayaknya. Multi = banyak ,tab = ya tab/kolom 😅 ,sidebar = Translate sendiri ,widget = Kebangetan kalau gak tahu. 

Multi tab sidebar yaitu sidebar didalam sidebar. Dalam satu sidebar maka kita mampu menambahkan 3 sidebar komplemen yang tentu mampu kita tambahkan widget pula. Multitab sidebar ini berupa 3 tab yang dimasing-masing tab tersebut mampu kita tambahkan widget. Ingin tahu multi tab sidebar itu menyerupai apa? Langsung saja lihat sidebar blog ini pasti anda melihat 3 tab disidebar nah itulah yang dinamakan multi tab sidebar.

Mungkin

Multi tab sidebar memiliki banyak manfaat. Salah satu manfaat yang aku suka yaitu mampu kita gunakan untuk menempatkan widget lain yang memerlukan banyak ruang menyerupai archive blog. Selain itu jikalau anda ingin menampilkan banyak widget tapi masih kekurangan ruang di sidebar mampu memasang multi tab sidebar. Sehingga widget yang tidak mampu ditampilkan mampu ditampilkan di multi tab sidebar. Tertarik untuk memasang multi tab sidebar?

Cara Memasang Multi Tab Sidebar Widget

Langkah 1
Buka blogger, pilih Template → Edit HTML. Salin isyarat dibawah ini lalu letakkan/pastekan diatas kode  ]]></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:#005cba;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 #005cba;font-size:14px;text-transform:capitalize}

Langkah 2
Salin isyarat dibawah ini dan pastekan diatas isyarat </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 3
Salin isyarat berikut ini lalu letakkan dibawah isyarat <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>

Terakhir simpan template.

Sekarang buka Tata Letak dan buat widget gres di multitab sidebar. Coba buka blog anda untuk melihat apakah widget yang dibuat sudah muncul di blog anda. Nah itu ia tutorial cara membuat multi tab sidebar widget di blogger supaya mampu membantu dan bermanfaat.