Cara Memasang Widget Multi Tab Di Sidebar Blog

Hari sudah sangat larut sekali malam ini, saya hanya memiliki waktu satu setengah jam saja untuk membuat satu artikel blog untuk hari ini sebelum berpindah ke hari esok. Ok langsung saja, sesuai dengan judul diatas, saya akan memberikan tutorial tentang cara memasang widget multi tab di sidebar blog sobat, widget multi tab ini sudah saya cuztomize sedemikian rupa agar tampil ciamik, jadi sobat tinggal pakai saja, namun apabila sobat ingin memodifikasinya sendiri boleh-boleh saja, nanti saya akan kasih tutorialnya juga. Sebelum kita memulainya, ada baiknya kita ketahui dulu apa fungsi dari widget multi tab ini. Fungsinya adalah untuk mempercantik tampilan blog sobat, tetapi tidak hanya itu saja, dengan menggunakan widget multi tab ini, sobat bisa menghemat ruang yang ada di sidebar, jika sidebar blog sobat terasa sesak, dan tidak enak dipandang karena banyaknya widget yang terpasang, maka wajib bagi sobat untuk menggunakan widget multi tab ini. Nantinya widget sobat akan terlihat lebih rapi, karena tiga widget sobat akan berderet bersampingan, kita tinggal klik saja diantara ketiga widget tersebut untuk melihat tampilan widgetnya. Widget multi tab ini menggunakan kombinasi kode CSS, JQuery, dan Javascript. Yuk kita mulai saja.

Buka akun blogger sobat, pilih menu Template, klik Edit HTML, ketikkan CTRL+F pada keyboard sobat untuk mencari kode ]]></b:skin>, selanjutnya Copy dan Pastekan kode di bawah ini tepat diatas kode ]]></b:skin> tersebut.

/*----- WMTS Huzenify ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:15px 0 0 15px;padding:0;height:20px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 1px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#FFFFFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx0msIU7Vfs2PG5ZZ2XRpI7YGNcHitSogzqfZe7Xf-MRDhQevJlQGUiSm6bTmKg_uwSJQuAu8l4St8M96NL_xhPsOyFh4LlzeksT_xVVHRZH2BI_6JN_VyfPXeZDLWgB-1EugcLp9jZBA/s320/fb.jpg) left top repeat-x;padding:4px 11.6px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2jWZtqtWZRFH8kI5s8M_onfgTjLHzhHSJr7yJ74o1B4CkEjxqKie6xOgaMbDubWLIJ0luooLy-zI0ldY3Gb9Yv8j12nIGOrTwSCAUtyYS-DSUK93HJih51p_ZiI0HtPUWobbae-odnvE/s320/grey2.jpg) left -140px repeat-x;color:#FFFFFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Perhatikan kode yang saya beri warna diatas sob, kode warna merah untuk menyamakan posisi widget sebelah kiri agar sejajar dengan pembatas antara widget dan postingan artikel, saran saya kode warna merah ini tidak perlu diubah. Kode warna ungu untuk mengatur jarak antara tab widget multitab dengan keterangan yang ada dibawahnya (sesuaikan dengan selera sobat). Kode warna biru untuk mengatur jarak kerapatan dan kerenggangan antar tab widget multi tab (sesuaikan dengan selera sobat, tetapi jangan terlalu renggang). Kode warna orange untuk mengatur lebar/ tinggi widget (sesuaikan dengan kehendak sobat, jangan terlalu lebar karena akan terlihat jelek). Kode yang terakhir, yaitu kode warna hijau yang merupakan kode krusial, karena kode ini harus disesuaikan sesuai dengan ukuran dan lebar template sobat, kode ini untuk mengatur panjang dan pendek dari widget multi tab disisi sebelah kanan (sesuaikan sampai pas dengan template sobat). Kode warna pink merupakan alamat link background widget multi tab, sobat bisa menggantinya dengan warna yang lain. Catatan: Sebelum menyesuaikan kode angka diatas, sobat harus selesaikan dulu semua langkah-langkah yang saya berikan di dalam artikel ini, dibutuhkan kesabaran dan ketelitian agar widget multi tab nya bisa sesuai dengan template sobat.

Langsung ke langkah selanjutnya, letakkan kode javascript dan jquery di bawah ini tepat di bawah kode <div class='column-right-inner'> Jika kode tersebut tidak ada, coba cari kode ini <div id='sidebar-wrapper'>. Pada template saya sendiri kode nya adalah <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> kode ini berbeda dengan dua kode diatas, jadi intinya cari kode yang hampir mirip seperti diatas yang ada tulisan sidebar-wrapper nya lalu letakkan kode javascript dan jquery di bawah ini tepat di bawahnya:

<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'><span style='font-size: large;color: #ff6600;'>&#10032;</span> Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'><span style='font-size: large;color: #ff6600;'>&#9776;</span> Category</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'><span style='font-size: large;color: #ff6600;'>&#10063;</span> Archive</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>

Pada kode yang saya beri tanda warna merah, ganti sesuai dengan nama widget sobat. Kode warna hijau menyala merupakan kode HTML dari simbol Bintang, Category, dan Archive, sobat bisa menggantinya dengan kode simbol yang lain, kunjungi website ini unicode-table. Kode warna orange merupakan warna dari symbol. Save template dan coba cek sidebar blog sobat, apakah widget multi tab nya tersusun dengan rapi/ malah acak-acakan. Jika widget multi tab sobat terlihat acak-acakan jangan panik dulu, lakukan penyesuaian  pada kode angka yang terdapat di /*----- WMTS Huzenify ----*/ yang telah saya jelaskan diatas, yaitu kode yang saya warnai hijau, sesuaikan ukurannya sampai widget multi tab nya rapi berderet 3 berdampingan (proses ini perlu memakan sedikit waktu, jadi cobalah sampai berhasil). Mungkin ini saja, jika sobat memiliki pertanyaan, ataupun kendala saat memasang kode diatas, sobat bisa tanyakan pada kolom komentar yang ada di bawah artikel saya ini. Saya dengan senang hati akan membantu sobat. Terima kasih sudah berkunjung di blog saya, sampai jumpa di artikel menarik lainnya.