Development
Add Multi-Tabbed Widget in Blogger/Blogspot Blog
The most space efficient widget for a blog is off course a multi-tabbed widget, which saves a lot of precious space for any blog. You can use it for merging number of gadgets in one widget.
Instead of showing Basic widgets for Blogger Blog like Popular posts, Archives, Tags , Recent Posts etc separately, you can merge them all in one multi-tabbed widget to save space.
See the Demo HERE
In other methods you have to upload some .css and/or javascript (.js) files to some hosted server and then add that link of the script back to your blog. FYI, this increases page load time.
So Unlike other methods that you have seen of any multi-tabbed widget, this method has all the css/scripts in your own blog’s template, thus reducing page load time noticeably.
Installation has three parts;
1. First part contains css/javascript code installation in template.
2. Second part explains installation of multi-tabbed widget in the template for your sidebar.
3. Third one is simple and tells adding the main gadgets from the layout section in the multi tab widget.
Part 1 – Installating css/script in Template
1. Navigate to Edit HTML page.
2. Download a backup of your template. (Dont skip this step!)
3. Search (Ctrl+F) for :
]]></b:skin>
and Just ABOVE it, copy and paste this entire css code block
<!-- Multi-Tabbed Widget CSS STARTS-->
.domtab{margin:0px; padding:0px; float:left; width:370px; font-size:1em}
.domtab li{overflow:hidden}
.domtabs{margin:0px; padding:0px; float:left; width:370px; list-style-type:none} <-- Change this width to change widget's widht -->
.domtab h2{margin:0px; padding:0px; float:left; width:370px; display:none}
.domtab .widget h2{display:none; visibility:hidden; herght:0px}
.domtabs li.active a:link, .domtabs li.active a:visited, .domtabs li.active a:active, .domtabs li.active a:hover{color:#000; text-decoration:none; display:block; float:left; padding-right:15px; padding-left:15px; text-align:center; margin:0px; height:33px; padding-top:0px; border-top:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #EEE; border-left:1px solid #CCC;
background:url(https://bp0.blogger.com/_Zuzii37VUO4/R94sIU3jklI/AAAAAAAACr0/Huxdarz9Q8E/s1600/dom.gif) repeat-x bottom}
.domtabs a:link, .domtabs a:visited, .domtabs a:active, .domtabs a:hover{text-decoration:none; display:block; float:left; margin:0px; padding-right:15px; padding-left:15px; text-align:center; height:33px; background:#f9f9f9; border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #eee; color:#000; padding-top:0px; border-bottom:1px solid #E9E9E9}
.domtabs li{display:inline; float:left; line-height:30px; height:34px; font-weight:bold; padding:0px; margin:0px}
#tabs-wrap{float:left; width:370px}
#tabs-wrap object{margin:0px; padding:0px; float:left; height:200px; width:370px; border-width:0px}
#tabs-wrap embed{margin:0px; padding:0px; float:left; width:340px; border-width:0px; height:200px}
#tabs-wrap .widget{margin:0px; padding:5px 10px 10px; float:left; width:340px; list-style-type:none}
#tabs-wrap .widget ul{margin:0px; padding:0px; float:left; width:340px}
#tabs-wrap .widget li{margin:0px 0px 5px; padding:0px; float:left; width:340px; line-height:16px; color:#666}
#tabs-wrap .widget ul li{margin:5px 0px 0px; padding:0px; float:left; width:340px; color:#666}
#tabs-wrap .widget li a{color:#000; text-decoration:none; margin:0px; padding:0px 0px 0px 20px; background:url(https://bp2.blogger.com/_Zuzii37VUO4/R94sY03jkvI/AAAAAAAACtE/3aG3NUoYF50/s1600/radio.gif) no-repeat 4px 2px; float:left}
#tabs-wrap .widget li a:hover{color:#900; text-decoration:underline; margin:0px; padding:0px 0px 0px 20px; background:url(https://bp2.blogger.com/_Zuzii37VUO4/R94sY03jkvI/AAAAAAAACtE/3aG3NUoYF50/s1600/radio.gif) no-repeat 4px 2px; float:left}
#tabs-wrap .nolist{margin:0px; padding:10px; float:left; width:370px; list-style-type:none; font-size:1em; line-height:18px}
.nolist a{color:#C00; text-decoration:none}
#tabs-wrap .nolist ul{margin:0px; padding:0px; float:left; width:370px}
#tabs-wrap .nolist li{margin:0px 0px 5px; padding:0px; float:left; width:370px; line-height:24px; color:#000}
#tabs-wrap .nolist ul li{margin:5px 0px 0px; padding:0px; float:left; width:370px; color:#000}
#tabs-wrap .nolist li a{color:#000; text-decoration:none; margin:0px; padding:0px; float:left}
#tabs-wrap .nolist li a:hover{color:#900; text-decoration:none; margin:0px; padding:0px; float:left}
#tab_one{}
#tab_two{}
#tab_three{}
.BlogArchive #ArchiveList ul li{text-indent:0px !important}
.tab_one{float:left; width:370px; padding:5px 0px 10px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_two{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_three{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
.tab_four{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
<!-- Multi-Tabbed Widget CSS ENDS-->
4. Now come back to the same tag you searched in step 3
]]></b:skin>
and this time just BELOW it, copy paste this entire javascript :
<!-- Multi-Tabbed Widget JAVASCRIPT STARTS-->
<script defer='defer' type='text/javascript'>
/*
DOMtab Version 3.1415927
written by Christian Heilmann
check blog for updates: http://www.wait-till-i.com
free to use, not free to resell
*/
domtab={
tabClass:'domtab', // class to trigger tabbing
listClass:'domtabs', // class of the menus
activeClass:'active', // class of current link
contentElements:'div', // elements to loop through
printID:'domtabprintview', // id of the print all link
showAllLinkText:'show all content', // text for the print all link
prevNextIndicator:'doprevnext', // class to trigger prev and next links
prevNextClass:'prevnext', // class of the prev and next list
prevLabel:'previous', // HTML content of the prev link
nextLabel:'next', // HTML content of the next link
prevClass:'prev', // class for the prev link
nextClass:'next', // class for the next link
init:function(){
var temp;
if(!document.getElementById || !document.createTextNode){return;}
var tempelm=document.getElementsByTagName('div');
for(var i=0;i<tempelm.length;i ){
if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
domtab.initTabMenu(tempelm[i]);
domtab.removeBackLinks(tempelm[i]);
if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){
domtab.addPrevNext(tempelm[i]);
}
domtab.checkURL();
}
if(document.getElementById(domtab.printID)
&& !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){
var newlink=document.createElement('a');
newlink.setAttribute('href','#');
domtab.addEvent(newlink,'click',domtab.showAll,false);
newlink.onclick=function(){return false;} // safari hack
newlink.appendChild(document.createTextNode(domtab.showAllLinkText));
document.getElementById(domtab.printID).appendChild(newlink);
}
},
checkURL:function(){
var id;
var loc=window.location.toString();
loc=/#/.test(loc)?loc.match(/#(w. )/)[1]:'';
if(loc==''){return;}
var elm=document.getElementById(loc);
if(!elm){return;}
var parentMenu=elm.parentNode.parentNode.parentNode;
parentMenu.currentSection=loc;
parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none';
domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass);
var links=parentMenu.getElementsByTagName('a');
for(i=0;i<links.length;i ){
if(!links[i].getAttribute('href')){continue;}
if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
id=links[i].href.match(/#(w. )/)[1];
if(id==loc){
var cur=links[i].parentNode.parentNode;
domtab.cssjs('add',links[i].parentNode,domtab.activeClass);
break;
}
}
domtab.changeTab(elm,1);
elm.focus();
cur.currentLink=links[i];
cur.currentSection=loc;
},
showAll:function(e){
document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));
var tempelm=document.getElementsByTagName('div');
for(var i=0;i<tempelm.length;i ){
if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
for(var j=0;j<sec.length;j ){
sec[j].style.display='block';
}
}
var tempelm=document.getElementsByTagName('ul');
for(i=0;i<tempelm.length;i ){
if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;}
tempelm[i].parentNode.removeChild(tempelm[i]);
i--;
}
domtab.cancelClick(e);
},
addPrevNext:function(menu){
var temp;
var sections=menu.getElementsByTagName(domtab.contentElements);
for(var i=0;i<sections.length;i ){
temp=domtab.createPrevNext();
if(i==0){
temp.removeChild(temp.getElementsByTagName('li')[0]);
}
if(i==sections.length-1){
temp.removeChild(temp.getElementsByTagName('li')[1]);
}
temp.i=i; // h4xx0r!
temp.menu=menu;
sections[i].appendChild(temp);
}
},
removeBackLinks:function(menu){
var links=menu.getElementsByTagName('a');
for(var i=0;i<links.length;i ){
if(!domtab.backToLinks.test(links[i].href)){continue;}
links[i].parentNode.removeChild(links[i]);
i--;
}
},
initTabMenu:function(menu){
var id;
var lists=menu.getElementsByTagName('ul');
for(var i=0;i<lists.length;i ){
if(domtab.cssjs('check',lists[i],domtab.listClass)){
var thismenu=lists[i];
break;
}
}
if(!thismenu){return;}
thismenu.currentSection='';
thismenu.currentLink='';
var links=thismenu.getElementsByTagName('a');
for(i=0;i<links.length;i ){
if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
id=links[i].href.match(/#(w. )/)[1];
if(document.getElementById(id)){
domtab.addEvent(links[i],'click',domtab.showTab,false);
links[i].onclick=function(){return false;} // safari hack
domtab.changeTab(document.getElementById(id),0);
}
}
id=links[0].href.match(/#(w. )/)[1];
if(document.getElementById(id)){
domtab.changeTab(document.getElementById(id),1);
thismenu.currentSection=id;
thismenu.currentLink=links[0];
domtab.cssjs('add',links[0].parentNode,domtab.activeClass);
}
},
createPrevNext:function(){
// this would be so much easier with innerHTML, darn you standards fetish!
var temp=document.createElement('ul');
temp.className=domtab.prevNextClass;
temp.appendChild(document.createElement('li'));
temp.getElementsByTagName('li')[0].appendChild(document.createElement('a'));
temp.getElementsByTagName('a')[0].setAttribute('href','#');
temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel;
temp.getElementsByTagName('li')[0].className=domtab.prevClass;
temp.appendChild(document.createElement('li'));
temp.getElementsByTagName('li')[1].appendChild(document.createElement('a'));
temp.getElementsByTagName('a')[1].setAttribute('href','#');
temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel;
temp.getElementsByTagName('li')[1].className=domtab.nextClass;
domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false);
domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false);
// safari fix
temp.getElementsByTagName('a')[0].onclick=function(){return false;}
temp.getElementsByTagName('a')[1].onclick=function(){return false;}
return temp;
},
navTabs:function(e){
var li=domtab.getTarget(e);
var menu=li.parentNode.parentNode.menu;
var count=li.parentNode.parentNode.i;
var section=menu.getElementsByTagName(domtab.contentElements);
var links=menu.getElementsByTagName('a');
var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count 1;
section[count].style.display='none';
domtab.cssjs('remove',links[count].parentNode,domtab.activeClass);
section[othercount].style.display='block';
domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass);
var parent=links[count].parentNode.parentNode;
parent.currentLink=links[othercount];
parent.currentSection=links[othercount].href.match(/#(w. )/)[1];
domtab.cancelClick(e);
},
changeTab:function(elm,state){
do{
elm=elm.parentNode;
} while(elm.nodeName.toLowerCase()!=domtab.contentElements)
elm.style.display=state==0?'none':'block';
},
showTab:function(e){
var o=domtab.getTarget(e);
if(o.parentNode.parentNode.currentSection!=''){
domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);
}
var id=o.href.match(/#(w. )/)[1];
o.parentNode.parentNode.currentSection=id;
o.parentNode.parentNode.currentLink=o;
domtab.cssjs('add',o.parentNode,domtab.activeClass);
domtab.changeTab(document.getElementById(id),1);
document.getElementById(id).focus();
domtab.cancelClick(e);
},
/* helper methods */
getTarget:function(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;}
return target;
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
return;
}
if (e){
e.stopPropagation();
e.preventDefault();
}
},
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' evType, fn);
return r;
} else {
elm['on' evType] = fn;
}
},
cssjs:function(a,o,c1,c2){
switch (a){
case 'swap':
o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!domtab.cssjs('check',o,c1)){o.className =o.className?' ' c1:c1;}
break;
case 'remove':
var rep=o.className.match(' ' c1)?' ' c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
var found=false;
var temparray=o.className.split(' ');
for(var i=0;i<temparray.length;i ){
if(temparray[i]==c1){found=true;}
}
return found;
break;
}
}
}
domtab.addEvent(window, 'load', domtab.init, false);
</script>
<!-- Multi-Tabbed Widget JAVASCRIPT ENDS-->
Part 2 – Installing the Multi-tabbed Widget
5. Now Search for
or
<div id='sidebar-wrapper'>
<div id='sidebar'>
or you may find similar tag names in your template.
6. Just BELOW the tag, copy and paste this code:
<div class='domtab'>
<!-- Tabs titles -->
<ul class='domtabs'>
<li><a href='#tabone'>TITLE- Tab1</a></li>
<li><a href='#tabtwo'>TITLE- Tab2</a></li>
<li><a href='#tabthree'>TITLE- Tab3</a></li>
<li><a href='#tabfour'>TITLE- Tab4</a></li>
<!-- END OF Tabs titles -->
</ul>
<!-- Tabs content -->
<div id='tabs-wrap'>
<div class='tab_one'>
<h2><a id='tabone' name='tabone'/></h2>
<b:section class='sidebar' id='mytab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tab_two'>
<h2><a id='tabtwo' name='tabtwo'/></h2>
<b:section class='sidebar' id='maytab2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tab_three'>
<h2><a id='tabthree' name='tabthree'/></h2>
<b:section class='sidebar' id='mytab3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<b:section class='sidebar' id='mytab4' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- End of Tabs -->
</div>
</div>
Before saving, don’t forget to make required changes.
– Text in red are the titles of the tabs, Replace them with the Titles that you want to give to each tab respectively.
7. After making required changes, Preview the template.
8. If you can see the multi-tabbed widget in your blog then Hit Save Button.
Double check for code you copied/pasted and their exact places if any error comes up while saving.
Part 3 – Adding the gadets in the Multi-Tabbed Widget
This part is fairly easy. After installing css/javascript part in the template save the template and open “Layout” page of your blog. You’ll see “Add a gadget” section under each (embedded) tab of the multi-tabbed widget. Click Tab Titles one by one and Click “Add a gadget” under it, to add gadget of your choice under each tab.
CUSTOMIZATION
– The widget automatically adjusts its width wherever it is placed.
– If you want to change the width of the tabs, change width size in blue in css code of Part 1.
– You can reduce or add as many tabs as you want in the widget.
1. To remove a tab, remove this line defining tab four in the end of css code (of step 3)
.tab_four{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
2. And then remove Tab 4 from the the main widget code (of step 6) by removing:
<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<b:section class='sidebar' id='mytab4' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
…this will remove Tab #4, leaving only 3 Tabs.
To Add a Tab:
1. Just add this line in the end of the code you placed in step 3.
.tab_five{float:left; width:370px; padding:10px 0px 0px; background:#E9E9E9; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-left:1px solid #CCC}
This will add Tab # 5 in the widget.
If you want to add more tabs, copy this line one more time and paste in the end and replace .tab_five with .tab_six and so on…
2. Now in main widget code (of step 6) search for <!– END OF Tabs titles –> and just ABOVE it paste this code:
<li><a href='#tabfive'>TITLE- Tab5</a></li>
3. In the same code, search for <!– End of Tabs –> and just ABOVE it, paste this code block for a new tab.
<div class='tab_five'>
<h2><a id='tabfive' name='tabfive'/></h2>
<b:section class='sidebar' id='mytab5' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
…and Save the template again.
I’m sure you must be still looking at the large pieces of code above for the widget..Right? 😀
But this is how reducing page load strategy works – putting all the scripts inside template’s own body.
If you have your own hosting then you may put the code in a separate .js file.
You may check out Multi-Tabbed Widget by bloggerstop that uses external .js and .css files.
I Hope you got all the steps and procedure, if it’s still confusing leave the queries/comments below.
See the Demo of this widget HERE.
Best Generative AI Chatbot Comparison: ChatGPT vs Gemini vs Copilot vs Claude
Explore the pinnacle of conversational AI as we compare leading platforms: ChatGPC, Gemini, Copilot, and Claude for the title of...
Top 5 Disposable Email Generators for Secure Temporary Use
Discover the best disposable email generators for safe, temporary email solutions. Ideal for quick use without compromising privacy.
The Best Methods To Transfer Data From Android To iPhone
Switching from an Android phone to an iPhone can be an exciting but overwhelming experience, especially when you want to...
Get FREE US Virtual Bank Account Number To Receive Payments Online
Getting a virtual account number is the unique need of those freelancers and other online earners who work prolifically on...
Make Perfect Visual Identities On Mobile With Logo Maker App!
Are you amid those who are looking for a perfect logo creator? Be glad! Logo Maker App has heard you. You...