Cara Memasang Multi Tab Sidebar Widget

5/27/2015
Cara Memasang Multi Tab Sidebar Widget

Kali ini Saya akan berbagi tentang Cara Memasang Multi Tab Sidebar Widget yang mungkin pernah sobat lihat di beberapa web yang menggunakannya.

Salah satu manfaat dari widget ini adalah jika sobat 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 bisa sobat bagi menjadi beberapa kolom yang akan membuat blog sobat menjadi lebih terlihat rapi dan menarik.

Langsung saja, cara penerapannya sebagai berikut :

Login ke Blogger > Klik Template > Klik Edit HTML > Salin kode di bawah ini tepat 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 kode di bawah ini tepat 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 kode di bawah ini tepat 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 kode di atas sesuai dengan judul widget yang sobat pasang.

Terakhir simpat template dan lihat hasilnya


Sekian tips Cara Memasang Multi Tab Sidebar Widget, selamat mencoba.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

17 comments

yg div id='sidebar-wrapper' saya cari gx ada

Balas

Sesuaikan id sidebar wrapper pada template template yang digunakan. Intinya simpan di dalam markup sidebar

Balas

. .maaf pemula jadi agk bingung. .

Balas

Mohon masukan kenapa ini tidak bisa ditarok di template vienna lite 2 ya ?

Balas

maaf min kok kalau di vienna lite 2 malah nggak bisa, lebih tepatnya sih jadi berantakan widgetnya

Balas

Kl itu bisa disesuaikan kembali dengan template, ID dan class-nya

Balas

masih tidak bisa . apa yang harus di ubah nya ? template saya vienna lite 2

Balas

Cukup tambahkan kode di atas di dalam markup sidebar

Balas

tetap , malahan ga masuk ke dalam widget (popular post) nya .

Balas

Dicoba lg, atau search blog ini dengan kata kunci Memasang Multi Tab Widget di Sidebar

Balas

ga masuk d template johny wuss mas. gmna caranya?

Balas

kok di template saya nggak muncul kode pada langkah ke 3 ya?

Balas

jadi ngga perlu edit tata letak ya kak ?

Balas

mbah punya saya kok menyatu sama kotak search ... saya make template dari mbah yang Vikka .
Kotak search nya kan disidebar ... cara agar posisi multi tab sidebar agak kebawahan gimana ya mbak ??? mohon bantuannya mbak .

Balas

Mbak sidebar multitab diblog aku keluar di sidebar, tp ditabnya itu g keluar post terbaru, dll
mohon bantuannya

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.