Instead of showing basic widgets like Popular posts, Archives, Tags , Recent Posts etc separately, you can merge them all in one multi-tabbed widget to save space.
See my side bar to see how it looks.
In other methods you have to upload some .css and/or javascript (.js) files to some other hosting 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 pag.
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
Click to expand CSS code [+/-]
<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOm_G0sDfzJCvgvOs6GPX1hhGT8x32Jrdk5Blo6Ptx6Az7IMGbFXu00zecVTv51vOgB4UQuMizEK-zWSg2HaD1HdDqdRR1Qyxos8qefKEAGRklNjEptNP2kxfSUXZbXLYqjvmQhHcemT0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UHkJY3eHq7UZMZYSIdVyG6i11dCMU59iSJyR2j3SV9Ehm9FEyAE3hdNBTm86lLMpSQzJmVD346gPm5Ldx_QKL7ByNCWyCtmrUEXzSFIPQNsgRtjx8gJfYS_ZKhM4RjMF6U4aqIUhHqI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UHkJY3eHq7UZMZYSIdVyG6i11dCMU59iSJyR2j3SV9Ehm9FEyAE3hdNBTm86lLMpSQzJmVD346gPm5Ldx_QKL7ByNCWyCtmrUEXzSFIPQNsgRtjx8gJfYS_ZKhM4RjMF6U4aqIUhHqI/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 :
Click to expand 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
6. Now Search for
<div id='sidebar'>
or
<div id='sidebar-wrapper'>
or you may find similar tag names in your template.
6. Just BELOW the tag, copy and paste this code:
Click to expand the code for Main widget [+/-]
<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.
8. After making required changes, Preview the template.
5. 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.
To Remove a Tab : [+/-]
1. Remove line defining tab four in the end.
.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's from the the main widget 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 (ABOVE ]]></b:skin> tag)
.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 Search for <!-- END OF Tabs titles --> in the template and just ABOVE it paste this code:
<li><a href='#tabfive'>TITLE- Tab5</a></li>
2. Now search for <!-- End of Tabs --> and just ABOVE it, paste this code.
<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.
Tha's too messy - Any Alternative?
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.
And 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 its still confusing leave the queries/comments below.
0 comments:
Post a Comment