Home » » Cara Membuat Tabbed Widget di Sidebar Blog

Cara Membuat Tabbed Widget di Sidebar Blog

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 CB ini 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 </head> dan Copy & Paste kode berikut ini tepat di atas </head>

<!-- Tabber Widget  -->
<script type='text/javascript'> 
//<![CDATA[ 
document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 
function tabberObj(argsObj) 

  var arg; 
  this.div = null; 
  this.classMain = "tabber"; 
  this.classMainLive = "tabberlive"; 
  this.classTab = "tabbertab"; 
  this.classTabDefault = "tabbertabdefault"; 
  this.classNav = "tabbernav"; 
  this.classTabHide = "tabbertabhide"; 
  this.classNavActive = "tabberactive"; 
  this.titleElements = ['h2','h3','h4','h5','h6']; 
  this.titleElementsStripHTML = true; 
  this.removeTitle = true; 
  this.addLinkId = false; 
  this.linkIdFormat = '<tabberid>nav<tabnumberone>'; 
  for (arg in argsObj) { this[arg] = argsObj[arg]; } 
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); 
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); 
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); 
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); 
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); 
  this.tabs = new Array(); 
  if (this.div) { 
    this.init(this.div); 
    this.div = null; 
  } 

tabberObj.prototype.init = function(e) 

  var 
  childNodes, 
  i, i2, 
  t, 
  defaultTab=0, 
  DOM_ul, 
  DOM_li, 
  DOM_a, 
  aId, 
  headingElement; 
  if (!document.getElementsByTagName) { return false; } 
  if (e.id) { 
    this.id = e.id; 
  } 
  this.tabs.length = 0; 
  childNodes = e.childNodes; 
  for(i=0; i < childNodes.length; i++) { 
    if(childNodes[i].className && 
       childNodes[i].className.match(this.REclassTab)) { 
      t = new Object(); 
      t.div = childNodes[i]; 
      this.tabs[this.tabs.length] = t; 
      if (childNodes[i].className.match(this.REclassTabDefault)) { 
    defaultTab = this.tabs.length-1; 
      } 
    } 
  } 
  DOM_ul = document.createElement("ul"); 
  DOM_ul.className = this.classNav; 
  for (i=0; i < this.tabs.length; i++) { 
    t = this.tabs[i]; 
    t.headingText = t.div.title; 
    if (this.removeTitle) { t.div.title = ''; } 
    if (!t.headingText) { 
      for (i2=0; i2<this.titleElements.length; i2++) { 
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) { 
      t.headingText = headingElement.innerHTML; 
      if (this.titleElementsStripHTML) { 
        t.headingText.replace(/<br>/gi," "); 
        t.headingText = t.headingText.replace(/<[^>]+>/g,""); 
      } 
      break; 
    } 
      } 
    } 
    if (!t.headingText) { 
      t.headingText = i + 1; 
    } 
    DOM_li = document.createElement("li"); 
    t.li = DOM_li; 
    DOM_a = document.createElement("a"); 
    DOM_a.appendChild(document.createTextNode(t.headingText)); 
    DOM_a.href = "javascript:void(null);"; 
    DOM_a.title = t.headingText; 
    DOM_a.onclick = this.navClick; 
    DOM_a.tabber = this; 
    DOM_a.tabberIndex = i; 
    if (this.addLinkId && this.linkIdFormat) { 
      aId = this.linkIdFormat; 
      aId = aId.replace(/<tabberid>/gi, this.id); 
      aId = aId.replace(/<tabnumberzero>/gi, i); 
      aId = aId.replace(/<tabnumberone>/gi, i+1); 
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); 
      DOM_a.id = aId; 
    } 
    DOM_li.appendChild(DOM_a); 
    DOM_ul.appendChild(DOM_li); 
  } 
  e.insertBefore(DOM_ul, e.firstChild); 
  e.className = e.className.replace(this.REclassMain, this.classMainLive); 
  this.tabShow(defaultTab); 
  if (typeof this.onLoad == 'function') { 
    this.onLoad({tabber:this}); 
  } 
  return this; 
}; 
tabberObj.prototype.navClick = function(event) 

  var 
  rVal, 
  a, 
  self, 
  tabberIndex, 
  onClickArgs; 
  a = this; 
  if (!a.tabber) { return false; } 
  self = a.tabber; 
  tabberIndex = a.tabberIndex; 
  a.blur(); 
  if (typeof self.onClick == 'function') { 
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; 
    /* IE uses a different way to access the event object */ 
    if (!event) { onClickArgs.event = window.event; } 
    rVal = self.onClick(onClickArgs); 
    if (rVal === false) { return false; } 
  } 
  self.tabShow(tabberIndex); 
  return false; 
}; 
tabberObj.prototype.tabHideAll = function() 

  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); 
  } 

//]]> 
</script>

3. Cari kode ]]></b:skin> 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 <div id='sidebar-wrapper'> dan Copas kode berikut ini di bawahnya:

<div style='clear:both;'/> <div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

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 </div> pada kode elemen <div id='sidebar-wrapper'> atau yang semisalnya (elemen sidebar), seperti dalam gambar di bawah ini:

 Tabbed Widget di Sidebar Blog

Untuk pengguna template New Johny Wuss, baik V1, V2, maupun V3, pemasangannya bisa seperti ini. Kodenya bukan <div id='sidebar-wrapper> tapi <div class='sidebar-wrapper>


tab sidebar widget blog johny wuss

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!

Thanks for reading & sharing Cara Membuat Tabbed Widget di Sidebar Blog

Previous
« Prev Post

16 comments:

Comment Page:
  1. mantap gan tapi di template yang ane pake NJW V3 ga ada kode <*div id='sidebar-wrapper'> itu gimana ya gan?

    ReplyDelete
    Replies
    1. semua template ada sidebar-wrapper, kecuali template yang gak pake sidebar alias full page

      Delete
  2. Luar Biasa gan, Makasih infonya saya sudah banyak ambil ilmunya dari agan.. Salam sukses

    ReplyDelete
  3. Kalo mau ane ganti Popular Post|Label|All Post gmna ?

    ReplyDelete
    Replies
    1. Tinggal ganti aja.... Itu 'kan Tabber Widet itu pada dasarnya sama dengan Widget biasa di sidebar, cuma ini mah berpa "tabel", isinya sama saja, bebas diisi widget apa saja....

      Delete
    2. Mengurangi SEO ga gan :3 Mantep Neh CHIBI BLOGGER blog ane jadi 100% SEOnya http://1.bp.blogspot.com/-l5pqGwYglF0/VMIn80jIlGI/AAAAAAAAAT0/IHv1mNXFE-o/s1600/My%2BHMCyber.png

      Delete
    3. Tidak sama sekali, ini buktinya:
      SEO Score for http://contohblognih.blogspot.com/
      100 %
      Congratulations!

      Delete
  4. nggak ada kode kaya gini <*div id='sidebar-wrapper'*> di johnywuss v3 bro, sebelah mana ya?

    ReplyDelete
    Replies
    1. sudah dijelaskan di atas, silakan baca lagi lebih teliti

      Delete
    2. makanya tong, baca dulu jangan maen tanya aja, wkwkwk....

      Delete
  5. gk ada code : *<div id='sidebar-wrapper>* di template nya mas sugeng gimana ya ?

    ReplyDelete
    Replies
    1. kalo gak ada sidebar-wrapper gak mungkin ada sidebar dong :)
      Tanya pembuat templatenya

      Delete
  6. bisa ngk dibuat dua atau sampe tiga tab? yang masing masing tab berisi tiga widget, jadi sudah lebih hemat ruang lagi, kalau bisa bisa dibagian sricpt mana yang harus di edit atau ditambah. terimakasih infonya

    ReplyDelete
  7. bang jadinya kok di bagian kanan paling atas ya? kalo nempatin di bagian paling bawah gimana ?

    ReplyDelete
  8. "Terbaru", "Terpopuler", dan "Teraniaya" :))))))))))))))

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox