Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama
persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau
demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu
tab, mengganti warna menu tab baik pada saat aktif ataupun ketika
hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog
anda.
Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :
Seperti biasa ....
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
<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>
//<![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>
6. Kemudian Copy juga kode CSS di bawah ini dan taruh tepat setelah kode javascript diatas, atau sebelum kode </head> :
<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/AVvXsEg6lWd78OQzLV7vgrj1ssCf35AhPIQgI84r4sYZ6vr5HCpCN3or0WHOTspLMjOfUF0HcEktoat1HHilforUvic42iHpi5VlpNnVnCn-6-U-2Ac6cxrJJ4xF7H-8ObG8PVfElcj14anr9og/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/AVvXsEg6lWd78OQzLV7vgrj1ssCf35AhPIQgI84r4sYZ6vr5HCpCN3or0WHOTspLMjOfUF0HcEktoat1HHilforUvic42iHpi5VlpNnVnCn-6-U-2Ac6cxrJJ4xF7H-8ObG8PVfElcj14anr9og/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/AVvXsEgQv9R8FjKHjg5M1-ODodBoPRXFt_yqdSu2Ma-PJXY8i1opApsyz8-SaXHAUjxLlvO5O62M-yHRGbI1m65zyC-3lASfDqVLmd8qejrpV2ENkFs3Jcc9iwihsKUBN4p9smtc5VlAP3g84x8/h1600/bg_menu.jpg)top repeat-x;
}
.tabbertab .widget-content li {
color:#488040;
border-bottom:1px solid #ddd;
margin:0 5px;
padding:5px;
}
</style>
.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/AVvXsEg6lWd78OQzLV7vgrj1ssCf35AhPIQgI84r4sYZ6vr5HCpCN3or0WHOTspLMjOfUF0HcEktoat1HHilforUvic42iHpi5VlpNnVnCn-6-U-2Ac6cxrJJ4xF7H-8ObG8PVfElcj14anr9og/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/AVvXsEg6lWd78OQzLV7vgrj1ssCf35AhPIQgI84r4sYZ6vr5HCpCN3or0WHOTspLMjOfUF0HcEktoat1HHilforUvic42iHpi5VlpNnVnCn-6-U-2Ac6cxrJJ4xF7H-8ObG8PVfElcj14anr9og/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/AVvXsEgQv9R8FjKHjg5M1-ODodBoPRXFt_yqdSu2Ma-PJXY8i1opApsyz8-SaXHAUjxLlvO5O62M-yHRGbI1m65zyC-3lASfDqVLmd8qejrpV2ENkFs3Jcc9iwihsKUBN4p9smtc5VlAP3g84x8/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 anda cari pada bagian sidebar, pada blog ini kodenya
seperti berikut :
Catatan :
- Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
- Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"
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.
Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat :
Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 6) yang perlu di ganti :
Nah.... selesai, mudah - mudahan penjelasan diatas membantu.
Do you like this article? Share It!
2 komentar to "Cara membuat tab menu atau multi tab pada blog"
About This Blog
Timotius Joso says:
tampilan blognya ganti nih
JOs998.blogspot.com
Myjos998.blogspot.com
Unknown says:
Tampilan blog nya gimana maksd nya gan..
#izin cek ke blognya#