Tab Multi Widget Untuk Blogger

Baru Tab Multi Widget Untuk Blogger | sudah tiga postingan saya membahas tentang bagaimana membuat tab multi widget di blogger, dan setelah melihat kekurangan-kekurangan dari sebelumnya saya ingin sobat semua tahu, kebanyakan tab multi widget untuk blogger tidak bisa menggunakan widget bawaan dari Blogger dan harus menggunakan Kode dari widget tersebut untuk tampilan tab multi widget sempurna, nah dengan mengikuti langkah-langkah ini dan memasangnya di blog sobat, sobat akan bebas menambahkan widget sesuai keinginan sobat baik itu widget bawaan dari Blogger ataupun juga yang lainnya. Salahsatu contohnya adalah postingan saya sebelumnya yaitu tab multi widget sederhana untuk blogger sobat bisa baca dan lihat perbedaannya dengan yang satu ini. Sobat juga bisa baca artikel saya yang lainnya tentang tab view multi widget yang lainnya.

1. Special tab view untuk widget di blogger lama dan blogger baru.
2. Tab multi widget bergaya wordpress di blogger.

Sobat bisa lihat sendiri gambar di atas sobat bisa melihat bagai mana tab multi widget ini terpasang rapi dan bisa sobat sesuaikan dengan template sobat. Jika sobat berminat untuk memasangnya silahkan ikuti langkah berikut.

1. Masuk ke Blogger dan masuk sebagai pengguna sobat sendiri.
2. Dari Dasbor => Rancangan => Edit HTML.
3. Cari kode </head> dan paste kode di bawah ini tepat di atasnya.

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

• Sekarang cari kode ]]></b:skin> dan simpan kode berikut di atasnya.

/*---------- Tabber BUS Start-------- */

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
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:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabberna
border:1px solid $tbbxbrv li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;color;
border-top:0;
background:$tbbxcolor1;
}
.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 $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*------- Tabber BUS End--------*/

1. Jangan dulu sobat simpan template sobat sebelum saya menyuruhnya, sekarang sobat cari Variabel Definitons dan ganti dengan kode berikut.

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"> 

<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"> 

<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"> 

<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

1. Jika sobat tidak menemukan variabel definitions sobat cari kode #navbar-iframe dan paste kode di bawah ini #navbar-iframe {beberapa teks disini}

/* Variable definitions 

   ====================

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"> 

<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"> 

<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"> 

<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

*/

1. Nah sekarang tahap bagian akhir, cari kode berikut  <div id='sidebar-wrapper'> dan paste kode berikut setelahnya.

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

<b:section class='tabbertab' id='tab4' maxwidgets='1'/> 

</div>

1. Dan sekarang silahkan sobat simpan template sobat, dan pergi Elemen Laman/ Tata Letak untuk menambahkan widget sobat dan nanti akan terlihat seperti ini.

Widget kosong yang tersusun rapih dari mulai satu sampai empat akan anda lihat nanti dan sobat akan menambahkan widget disana sesuai keinginan sobat dan lihat hasilnya tab multi widget keren terpampang rapi di blog sobat.

1. Silahkan sobat atur sendiri untuk penyesuaian warna tab multi widget-nya sobat utak atik sendiri kode di bagian ini.

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#289728" value="#289728">

Nah silahkan sobat ganti warna background dan yang lainnya pada kode di atas, sobat bisa melihat kode warna Blog Urang Sunda disini. Selamat mencoba dan jangan ragu untuk bertanya trimakasih.