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

Cara membuat multi tab sidebar menyerupai template evo magz keren. Multi tab sidebar cocok untuk widget-widget yang membutuhkan banyak ruang.

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 bila 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 arahan 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 arahan dibawah ini dan pastekan diatas arahan </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 arahan berikut ini lalu letakkan dibawah arahan <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 biar mampu membantu dan bermanfaat.