Cara Membuat Widget Menu Sidebar di Blog

Oleh Unknown

Monday, 22 June 2015

Setelah memberikan tutorial tentang Cara Membuat Widget Pada Blog
Pada postingan kali ini Blog Cara akan membahas tentang Cara Membuat Widget Menu Sidebar di Blog Bahwa menu di sidebar sangat dibutuhkan guna menghemat tempat pada sidebar, contohnya yang terdapat pada gambar di samping. Widget seperti ini gambar di samping biasa disebut "Multi Tabbed Widget". Tabber Widget ini termasuk Navigasi Blog sekaligus Internal Link yang sangat dianjurkan Mesin Pencari seperti Google. Internal Link atau Navigasi Menu akan memudahkan pengunjung mengeksplorasi konten blog.

Cara Membuat Widget Menu Sidebar di Blog :

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

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

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:

Jika kode <div id='sidebar-wrapper> tidak ada, coba dengan kode <div class='sidebar-wrapper>

5. Save Template!
Langkah selanjutnya tinggal mengisi tab yang sudah siap dimunculkan di Sidebar.
Pada "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.

Demikian postingan Blog Cara tentang Cara Membuat Widget Menu Sidebar di Blog semoga bermanfaat.