Membuat Multi Tab Widget di Sidebar Blog Versi ArlinaDesign

Kenyih.com - Artikel kali ini saya akan memberikan tutorial cara memasang multi tab menu atau multi tab view widget di sidebar blog. Tidak bisa di pungkiri widget merupakan bagian penting dari suatu blog, dengan bervariasinya dan banyaknya widget yang mungkin anda perlu pasang di blog tentunya sidebar juga butuh ruang lebih untuk penempatan widget-widget tersebut.

Dengan adanya Fungsi Multi tab menu di sidebar blog kita, tentu kita bisa menghemat tempat untuk menempatkan widget lebih banyak. Multi tab yang akan saya share disini saya ambil tutorialnya dari blog Arlina design dan mempunyai 3 tab view.

Simak langkah-langkah pemasangannya di bawah ini.
Setelah masuk blogger Dashboard kemudian masuk ke bagian edit HTML blog kita
Cari kode ]]></b:skin> kemudian copy dan paste kode di bawah ini di atas kode ]]></b:skin>

/* 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}

Cari kode </body> kemudian copy dan paste kode di bawah ini di atas kode </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>

Cari kode <div id='sidebar-wrapper'> kemudian copy dan paste kode di bawah ini tepat di bawah kode <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>

Sesuaikan nama Popular,Tags,Archive dengan yang anda pasang. Untuk pemasangannya masuk ke Layout -> disitu ada penambahan kolom untuk menempatkan widgetnya. Selesai apabila ada hal-hal yang perlu anda tanyakan silahkan hubungi melalui kotak komentar di bawah artikel ini.

Ditulis Oleh : Unknown ~ Arif Wong Ndeso

Anda sedang membaca sebuah artikel yang berjudul

Membuat Multi Tab Widget di Sidebar Blog Versi ArlinaDesign

URL : http://news.arifwongndeso.web.id/2015/07/membuat-multi-tab-widget-di-sidebar.html

Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar

:: Terima Kasih, TTD: Arif Wong Ndeso ::