Cara Membuat Multi Tab Widget di Sidebar Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Membuat Multi Tab Widget di Sidebar Blog, Postingan ini masih berhubungan dengan Artikel Widget.

Baca juga:

Cara Membuat Multi Tab Widget di Sidebar Blog

Advertisement

Cara membuat/ memasang multi tab widget - Oke sobat, sebelumnya saya sudah membagikan tutorial mengenai cara memasang CSS kompresor di blog, dan pada kesempatan kali ini saya akan memberikan tutorial mengenai cara membuat multi tab sidebar widget. Keuntungan alam memasang widget ini adalah dapat menghemat ruang pada bagian sidebar blog sobat. Selain dapat menghemat ruang di sidebar, widget ini juga bertujuan untuk menunda loading widget yang terdapat dalam tab tersebut, maka secara tidak langsung widget ini juga dapat meringankan loading sobat, di sisi lain blog sobat juga akan lebih terlihat lebih rapi. Untuk hasilnya silahkan perhatikan gambar di bawah ini.

Mungkin sudah banyak teman-teman blogger yang membagikan cara di atas. Namun tidak ada salahnya juga apabila saya juga ikut membagikan tutorial cara pemasangannya. Oh iya, nantinya hasil yang akan di tunjukkan dari tutorial kali ini untuk widget populer postnya tidak warna warni seperti gambar di atas lho ya. Namun apabila sobat juga ingin merubah tampilan populer postnya juga ikut warna warni seperti halnya yang nampak pada gambar di atas, sobat silahkan baca artikel saya yang berjudul cara membuat widget popular post mejadi warna warni.

Dan bagi sobat yang ingin memasang multi tab sidebar widget di blog masing-masing, silahkan ikuti langkah-langkah yang akan saya bagikan di bawah ini!

Cara Membuat Multi Tab Widget di Sidebar

1. Pertama seperti biasa, silahkan sobat masuk ke halaman blogger sobat.
2. Selanjutnya silahkan masuk dalam halaman Template -->>Edit HTML.
3. Kemudian silahkan cari kode  ]]></b:skin> dan letakkan kode di bawah ini tepat berada di atas kode tersebut.

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

4. Selanjutnya silahkan cari kode </body> dan letakkan kode di bawah ini tepat di atas kode tersebut.

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

5. Kemudian cari kode <div id='sidebar-wrapper'> dan letakkan di bawah ini tepat di bawah kode tersebut.

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

Keterangan :
Perhatikan tulisan Populer, Tags dan Archive di atas, silahkan ganti tulisan tersebut sesuai dengan judul widget anda.

6. Terakhir, silahkan simpan template anda dan lihat hasilnya.

Oiya, apabila sobat ingin mengganti tulisan Populer, Tags dan Archive dengan icon fonts awesome, sobat tinggal mengganti tulisan tersebut dengan kode di bawah ini!

<i class="fa fa-bullhorn"/>

Silahkan ganti tulisan yang saya tandai dengan nama/ kode icon fonts awesome sesuai dengan selera sobat. Untuk melihat jenis-jenis iconnya. Sobat dapat mengunjungi di situs resminya Fonts Awesome.

Nah, sampai disini sobat sudah berhasil memasang multi tab sidebar widget. Demikian artikel kali ini mengenai cara membuat multi-tab sidebar widget di blog, Apabila sobat ada pertanyaan ataupun ada yang di bingungkan silahkan tinggalkan komentar/ pertanyaan anda pada kolom komentar. Selamat mencoba, semoga bermanfaat :)