Cara buat tab menu atau multi tab

Tips kumpulsuka kali ini adalah Cara membuat menu Multitab, gunanya ini adalah untuk menghemat ruang blog kita, kamu bisa menyesuaikan sendiri nantinya.
Kamu bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger kamu.
2. Klik Template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode </head>
6. Copy kode di bawah ini dan taruh sebelum kode </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> <style type='text/css'> .tabberlive{ margin-left:0px; margin-right:0px; padding-left:5px; padding-right:5px; padding-top:6px; padding-bottom:5px; clear:both; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYflaydtNPJ_N1QZBDCFL97FYxLkCmgV2ZJYE_92OpsjXmXlXMA-tCz34_NcaGm-ioSgoTJ3TcXmXPGWMCspAFj0Or1O8c4ap5rC3LajZTS8nwMh7ikQFJmDFx-Kzb-2Dt6SDqp2NrINQ/h1600/bg_post.jpg) top left repeat-x; border:1px solid #DDD; } .tabbernav { list-style:none; list-style-type:none; margin-left:0; padding-left:0px; padding-top:7px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; list-style-type:none; width:20%; margin-right:1px; margin-bottom:0px; display:inline; } .tabbernav li a { padding-top:7px; padding-bottom:7px; padding-left:6px; padding-right:6px; list-style:none; list-style-type:none; margin-right:1px; background:#3e5fa2; text-decoration:none; color:#ffffff; outline:none; } .tabbernav li a:hover { list-style:none; list-style-type:none; color:#000; background:#7290ce url() center left no-repeat; text-decoration:none; outline:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { list-style:none; list-style-type:none; background:#fff; color:#3e5fa2; outline:none; padding-bottom:22px; padding-left:6px; padding-right:6px; border-right:2px solid #ddd; border-left:2px solid #ddd; border-top:1px solid #ddd; } .tabberlive .tabbertab { margin-top:0px; margin-left:0px; margin-right:0px; padding-top:5px; padding-left:6px; padding-right:6px; padding-bottom:5px; background:#fff; border:2px solid #ddd; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ margin-top:5px; margin-left:5px; padding:0px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYflaydtNPJ_N1QZBDCFL97FYxLkCmgV2ZJYE_92OpsjXmXlXMA-tCz34_NcaGm-ioSgoTJ3TcXmXPGWMCspAFj0Or1O8c4ap5rC3LajZTS8nwMh7ikQFJmDFx-Kzb-2Dt6SDqp2NrINQ/h1600/bg_post.jpg) top left repeat-x; } .tabbertab .widget-content ul a:hover{ text-decoration:none; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz1vtEEC9UGGymT7LqwLgkx1T4t1ZB30sL1f7U46Is2MLGpkTw3F_miTMEYD-LPBaSDFQKckNUFyvO1VpwCuzVFnSZSw5MFW_QuwRXRzJtsGG3z0KZ3cBOoJHdYMYmRjrhGVPSkSPE58/h1600/bg_menu.jpg)top repeat-x; } .tabbertab .widget-content li { color:#488040; border-bottom:1px solid #ddd; margin:0 5px; padding:5px; } </style>

7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan kamu cari pada bagian sidebar, pada blog ini kodenya seperti berikut <div id='rsidebar-wrapper'>

Catatan :
•Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
•kamu bisa meletakkan pada bagian tengah atau bagian "main-wrapper"

8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) <div class='tabber'>

<div class='tabbertab' id='tab1'> <h2>TAB MENU 1</h2> <b:section class='sidebar101' id='sidebar101' preferred='yes'> <b:widget id='HTML101' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> <div class='tabbertab' id='tab2'> <h2>TAB MENU 2</h2> <b:section class='sidebar102' id='sidebar102' preferred='yes'> <b:widget id='HTML102' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> <div class='tabbertab' id='tab3'> <h2>TAB MENU 3</h2> <b:section class='sidebar103' id='sidebar103' preferred='yes'> <b:widget id='HTML103' locked='false' title='' type='HTML'/> </b:section> </div> <div class='clear'/> </div> <div style='clear:both;'/>

Catatan :
• Teks warna biru adalah Judul tab menu.
• Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
• Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.

9. SIMPAN TEMPLATE.

Langkah selanjutnya kamu tinggal mengisi tab menu dengan gadget yang kamu suka.
Langsung saja kamu menuju "Tata letak", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja kamu buat, coba kamu sesuaikan dengan gadget yang kamu inginkan:
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.