Cara Memasang Multi Tab Sidebar Widget

Cara Memasang Multi Tab Sidebar Widget - Yups itulah yang akan kita bahas kali ini. Mungkin sobat sering melihat widget ini di terapkan pada web-web, Nah salah satu manfaat widget ini adalah, meminimalkan penggunakan widget pada sidebar sobat, dengan menggunakan multi tab ini, sobat akan lebih menghemat penempatan widget pada blog sobat. Tentunya juga akan meningkatkan profesionalitas blog sobat.

Oke langsung saja, berikut cara penerapannya.

Cara Memasang Multi Tab Sidebar Widget :

---

1. Login ke Blogger.

• Klik Dashboard.
• Pilih Template.
• Klik Edit HTML.

2. Salin / Copy kode CSS dibawah tepat 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:#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}

3. Selanjutnya Salin / Copy kode jQuery dibawah ini tepat diatas 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>

4. Kemudian Salin / Copy kode HTML dibawah ini tepat dibawah 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>

.
5. Ganti judul widget yang telah Saya beri tanda pada kode diatas dengan widget yang ingin sobat pasang.

6. Terakhir adalah Simpan/Save template sobat, dan lihat hasilnya.

Live Demo

Nah itulah sobat blogger, Cara memasang Multi tab sidebar widget pada blog sobat, selamat menerapkan, semoga berhasil. dadah :D.

Source : http://arlinadesign.blogspot.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html

http://bloggerisn.blogspot.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya