Cara Membuat Tabbed Widget di Sidebar Blog

MEMBUAT Tabbed Widget di Sidebar Blog bisa "menghemat" ruangan sidebar. Contohnya Tabber yang ada dalam ilustrasi gambar posting ini --Popular Posts, Latest Post, Comments. Keren 'kan?

Widget seperti ini dalam istilah bahasa Inggrisnya disebut "Multi Tabbed Widget".

Lihat DEMO

Di blog CBini juga ada, tapi hanya dimunculkan di halaman depan dengan menampilkan "Terbaru", "Terpopuler", dan "Teraniaya".

Tabber Widget ini termasuk Navigasi Blog sekaligus Internal Link yang sangat dianjurkan Google.

Internal Link atau Navigasi Menu akan memudahkan pengunjung mengeksplorasi konten blog.

Cara Membuat Tabbed Widget di Sidebar Blog

1. Template > Edit HTML
2. Cari (Ctrl+F) kode dan Copy & Paste kode berikut ini tepat di atas

inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>

3. Cari kode ]]> dan Copas kode berikut ini di atasnya!

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:6px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#0084ce;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#fff;
background:#333;
border:1px solid #DDD;
text-decoration:none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover {
background:#333;
color:#fff;
border-bottom: 0px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:0px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
padding:2px 0 5px 0;
}

4. Cari kode

dan Copas kode berikut ini di bawahnya:

Catatan:
Kode di atas akan memunculkan Tiga Tabber Widget Baru di Sidebar bagian paling atas.

Jika ingin menampilkan Tabbed Widget ini di bawah widget yang sudah ada, maka Copas kode tersebut sebelum kode penutup

pada kode elemen

atau yang semisalnya (elemen sidebar), seperti dalam gambar di bawah ini:

Untuk pengguna template New Johny Wuss, baik V1, V2, maupun V3, pemasangannya bisa seperti ini. Kodenya bukan

id='sidebar-wrapper> tapi

class='sidebar-wrapper>

5. Save Template!

Sekarang tinggal mengisi tab yang sudah siap dimunculkan di Sidebar.
Di "Layout" akan tampak tiga widget baru yang masih kosong. Silakan diisi dengan Latest Post, Popular Post, Comment, atau widget apa saja yang dikehendaki.

Klik Layout > Add a Gadget > silakan pilih widget yang akan ditampilkan.

Kode untuk Membuat Tabbed Widget di Sidebar Blog ini CB ambil dari My Blogger Buzz dan baru berani nge-share setelah sukses diterapkan. Good Luck!

reff : http://www.contohblog.com/2015/01/cara-membuat-tabbed-widget-di-sidebar.html