Cara Membuat Widget Tab pada Sidebar Blogspot

Terima kasih atas kunjungan Anda di blog saya ini. Kali ini saya akan membagikan cara membuat sidebar berbentuk tab-tab sehingga widget widget yang kita punya lebih ringkas. Contohnya adalah sidebar yang ada di blog ini. Silakan lihat di sebelah kanan Anda (bagi yang melihatnya dengan laptop) atau di bagian bawah setelah postingan ini (bagi yang membukanya di handphone).

Cara saya ini adalah tidak merombak seluruh widget yang sudah Anda pasang, tetapi hanya menaruh sedikit kode saja.

Baca juga: Belajar HTML, CSS, Javascript Dimulai Dari Mana Dulu Ya?

Pertama-tama adalah mengenali kode sidebar di template Anda. Jika Anda memasang template hasil mengambil dari situs orang lain, silakan cek apa nama sidebar Anda. Kecuali kalau memakai template bawaan blogspot sendiri

Sidebar biasanya ada di sisi kanan atau sisi kiri. Kemudian di layout tema Anda biasanya akan ada nama sidebarnya. Perhatikan contoh tampilan lay out dari nama sidebar di blog saya ini:

Contoh Nama Sidebar pada Template Blog ini

Dari contoh layout di atas, kita dapat diketahui bahwa nama sidebar ini adalah "sidebar" dan "sidebar1". Anda tinggal memilih sidebar mana yang akan menempatkan widget-widgetnya menjadi satu tempat seperti menu tab.

Untuk membuat widget-tab sehingga dapat diklik seperti jendela (tab windows), berikut caranya:

1. Masukkan kode CSS

Berikut kode Css-nya:

.widget-tab{background:#e8e8e8;font-family:Arial,Helvetica,sans-serif;padding:2px!important}
.widget-tab ul{margin:0;padding:0 5px}
.widget-tab ul li{list-style:none;border-bottom:2px dotted blue;padding-top:4px;padding-bottom:4px;font-size:12px}
.widget-tab ul li:last-child{border-bottom:1px dotted red}
.widget-tab ul li a{text-decoration:none;color:#3e4346}
.widget-tab ul li a small{color:#8bz959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0}
.tab-content ul li a:hover small{color:#baae8e}
.active-tab{background:#0EAF1A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA7vu3V9De5Ek7xXg461xXCinHNJixm8zVvSzeLxGiNG3sRWD0J801V5Q54Zi6PBZSlMyleSVmxPbeg43wFnPPcw4Gg0m6f2rw7M83hbZyraJXHwuo2SyAVXBd8IgDg4tdX4-yT6XKGs/s1600/sidebar-bg.png) repeat-x scroll left bottom!important;color:#282E32!important}
ul.tab-wrapper{margin:2px 0 2px;padding:0}
ul.tab-wrapper li{border-bottom:2px outset gold;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgVyx6X8CFb1MmOeayEtBel9tzDWLEHjZpq3-9dE774W9AkGKicFB6Jtv28S_zweHOizkdMeUZ7vY_lcCAp0dWs5u9ScyD0CYzveNolqfZCVslomguhyphenhyphenEeXxFYTzaz5ALemkCSfrGpq9M/w56-h140-p/tabber.png) repeat-x top;color:#FFF;cursor:pointer;display:inline;font-family:Arial;font-size:12px;line-height:2em;list-style-image:none!important;list-style-position:outside!important;list-style-type:none!important;margin-right:1px;text-align:center;text-decoration:none;text-transform:uppercase;padding:4px 8px}

taroh kode CSS tersebut di bawah

Atau Anda bisa menaruhnya di menu "Tambahkan kode css"

Baca juga: Membuat Border + Background Postingan Berbeda tiap postingan

2. Letakkan  versi JQuery.min.js, berikut:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Jika Anda memiliki JQuery.min,js lain, silakan ganti dengan ini. Jika tidak pun tidak apa-apa, asal JQuery sudah terbaru.

3. Tambahkan Javascript berikut juga:

<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname=&quot;sidebar&quot;;
</script>

Keterangan:

• var entab=3 menunjukkan jumlah widget yang akan dijadikan satu tumpukan sidebar. Angka 3 bukan berarti jumlah widgetnya ada 3, tetapi ada 4. Karena nilai awalnya dimulai dari nol (0). Anda bisa menambahkan jumlah widget yang mau dikumpulkan menjadi satu asal muat dan terlihat enak dipandang.
• Ganti kode sidebar yang berwarna merah dengan nama sidebar yang ada pada template Anda. 

Nama Sidebar blog dapat Anda lihat di Layout Tema berikut:

contoh nama sidebar dari tampilan Tata Letak (layout) Template

Dari gambar di atas, nama sidebar adalah "Sidebar" dan "Sidebar 1". Silakan ganti kode script yang berwarna merah tersebut dengan nama di sidebar Anda.

<script type='text/javascript'> //<![CDATA[ var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+" .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()}); //]]> </script>

Kode yang ada di Nomor 2 dan 3 ditempatkan sebelum kode berikut
. Letakkan tepat di atas kode tersebut.


4. Tempatkan Kode HTML berikut pada pembuka sidebar

<span id='skiplinks' style='display:none;'>
<a href='#sidebar'>skip to sidebar</a> </span>

Download Skripnya di sini
Kode nomer 4 ini ditempatkan di setelah kode sidebar yang Anda buat jendela. Atau letakkan saja tepat di bawah kode 


Nah, Sudah selesai. Silakan cek hasilnya... Jika berhasil, maka nantinya akan seperti sidebar yang berisi widget-widget yang ada di blog ini.

baca juga: Cara Membuat Carousel (Slide Otomatis) Postingan Terbaru

Jika kurang jelas, silakan komentar.

Semoga bermanfaat