Pure 4 Tab View Widget to Blogger/Websites << New Blog Online

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script type='text/javascript'>
/*
DOMtab Version 3.1415927
Updated March the First 2006
written by Christian Heilmann
check blog for updates: http://www.wait-till-i.com
free to use, not free to resell
*/

domtab={
tabClass:&#39;domtab&#39;, // class to trigger tabbing
listClass:&#39;domtabs&#39;, // class of the menus
activeClass:&#39;active&#39;, // class of current link
contentElements:&#39;div&#39;, // elements to loop through
printID:&#39;domtabprintview&#39;, // id of the print all link
showAllLinkText:&#39;show all content&#39;, // text for the print all link
prevNextIndicator:&#39;doprevnext&#39;, // class to trigger prev and next links
prevNextClass:&#39;prevnext&#39;, // class of the prev and next list
prevLabel:&#39;previous&#39;, // HTML content of the prev link
nextLabel:&#39;next&#39;, // HTML content of the next link
prevClass:&#39;prev&#39;, // class for the prev link
nextClass:&#39;next&#39;, // class for the next link
init:function(){
 var temp;
 if(!document.getElementById || !document.createTextNode){return;}
 var tempelm=document.getElementsByTagName(&#39;div&#39;); 
 for(var i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
  domtab.initTabMenu(tempelm[i]);
  domtab.removeBackLinks(tempelm[i]);
  if(domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.prevNextIndicator)){
   domtab.addPrevNext(tempelm[i]);
  }
  domtab.checkURL();
 }
 if(document.getElementById(domtab.printID)
    &amp;&amp; !document.getElementById(domtab.printID).getElementsByTagName(&#39;a&#39;)[0]){
  var newlink=document.createElement(&#39;a&#39;);
  newlink.setAttribute(&#39;href&#39;,&#39;#&#39;);
  domtab.addEvent(newlink,&#39;click&#39;,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]:&#39;&#39;;
 if(loc==&#39;&#39;){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=&#39;none&#39;;
 domtab.cssjs(&#39;remove&#39;,parentMenu.getElementsByTagName(&#39;a&#39;)[0].parentNode,domtab.activeClass);
 var links=parentMenu.getElementsByTagName(&#39;a&#39;);
 for(i=0;i&lt;links.length;i++){
  if(!links[i].getAttribute(&#39;href&#39;)){continue;}
  if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
  id=links[i].href.match(/#(\w.+)/)[1];
  if(id==loc){
   var cur=links[i].parentNode.parentNode;
   domtab.cssjs(&#39;add&#39;,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(&#39;div&#39;); 
 for(var i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
  var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
  for(var j=0;j&lt;sec.length;j++){
   sec[j].style.display=&#39;block&#39;;
  }
 }
 var tempelm=document.getElementsByTagName(&#39;ul&#39;); 
 for(i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,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&lt;sections.length;i++){
  temp=domtab.createPrevNext();
  if(i==0){
   temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[0]);
  }
  if(i==sections.length-1){
   temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[1]);
  }
  temp.i=i; // h4xx0r!
  temp.menu=menu;
  sections[i].appendChild(temp);
 }
},
removeBackLinks:function(menu){
 var links=menu.getElementsByTagName(&#39;a&#39;);
 for(var i=0;i&lt;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(&#39;ul&#39;);
 for(var i=0;i&lt;lists.length;i++){
  if(domtab.cssjs(&#39;check&#39;,lists[i],domtab.listClass)){
   var thismenu=lists[i];
   break;
  }
 }
 if(!thismenu){return;}
 thismenu.currentSection=&#39;&#39;;
 thismenu.currentLink=&#39;&#39;;
 var links=thismenu.getElementsByTagName(&#39;a&#39;);
 for(i=0;i&lt;links.length;i++){
  if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
  id=links[i].href.match(/#(\w.+)/)[1];
  if(document.getElementById(id)){
   domtab.addEvent(links[i],&#39;click&#39;,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(&#39;add&#39;,links[0].parentNode,domtab.activeClass);
 }
},
createPrevNext:function(){
 // this would be so much easier with innerHTML, darn you standards fetish!
 var temp=document.createElement(&#39;ul&#39;);
 temp.className=domtab.prevNextClass;
 temp.appendChild(document.createElement(&#39;li&#39;));
 temp.getElementsByTagName(&#39;li&#39;)[0].appendChild(document.createElement(&#39;a&#39;));
 temp.getElementsByTagName(&#39;a&#39;)[0].setAttribute(&#39;href&#39;,&#39;#&#39;);
 temp.getElementsByTagName(&#39;a&#39;)[0].innerHTML=domtab.prevLabel;
 temp.getElementsByTagName(&#39;li&#39;)[0].className=domtab.prevClass;
 temp.appendChild(document.createElement(&#39;li&#39;));
 temp.getElementsByTagName(&#39;li&#39;)[1].appendChild(document.createElement(&#39;a&#39;));
 temp.getElementsByTagName(&#39;a&#39;)[1].setAttribute(&#39;href&#39;,&#39;#&#39;);
 temp.getElementsByTagName(&#39;a&#39;)[1].innerHTML=domtab.nextLabel;
 temp.getElementsByTagName(&#39;li&#39;)[1].className=domtab.nextClass;
 domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[0],&#39;click&#39;,domtab.navTabs,false);
 domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[1],&#39;click&#39;,domtab.navTabs,false);
 // safari fix
 temp.getElementsByTagName(&#39;a&#39;)[0].onclick=function(){return false;}
 temp.getElementsByTagName(&#39;a&#39;)[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(&#39;a&#39;);
 var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1;
 section[count].style.display=&#39;none&#39;;
 domtab.cssjs(&#39;remove&#39;,links[count].parentNode,domtab.activeClass);
 section[othercount].style.display=&#39;block&#39;;
 domtab.cssjs(&#39;add&#39;,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?&#39;none&#39;:&#39;block&#39;;
},
showTab:function(e){
 var o=domtab.getTarget(e);
 if(o.parentNode.parentNode.currentSection!=&#39;&#39;){
  domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
  domtab.cssjs(&#39;remove&#39;,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(&#39;add&#39;,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() != &#39;a&#39;){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(&#39;on&#39; + evType, fn);
  return r;
 } else {
  elm[&#39;on&#39; + evType] = fn;
 }
},
cssjs:function(a,o,c1,c2){
 switch (a){
  case &#39;swap&#39;:
   o.className=!domtab.cssjs(&#39;check&#39;,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
  break;
  case &#39;add&#39;:
   if(!domtab.cssjs(&#39;check&#39;,o,c1)){o.className+=o.className?&#39; &#39;+c1:c1;}
  break;
  case &#39;remove&#39;:
   var rep=o.className.match(&#39; &#39;+c1)?&#39; &#39;+c1:c1;
   o.className=o.className.replace(rep,&#39;&#39;);
  break;
  case &#39;check&#39;:
   var found=false;
   var temparray=o.className.split(&#39; &#39;);
   for(var i=0;i&lt;temparray.length;i++){
    if(temparray[i]==c1){found=true;}
   }
   return found;
  break;
 }
}
}
domtab.addEvent(window, &#39;load&#39;, domtab.init, false);
</script>

<style type='text/css'>

/* --(tabs)-- */
.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;
}
.domtab h2 {
margin: 0px;
padding: 0px;
float: left;
width: 330px;
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: #000000;
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 #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #CCCCCC;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdxrDGXDqHN7NuOUA7cKdxwHjbNKcSf5TtBPjozkPXuWIF2WZuKkDmxyzEndB0iid3dPgP4591GmPH9wAIsxIadh3ZipQkMFVDjmPMyPgfCPbGmON72-YVmJotEff3JsFEE-iZB7s7pXV/) 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 #eeeeee;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
color: #000000;
padding-top: 0px;
border-bottom: 1px solid #E9E9E9;
}
.domtabs li {
font-size:11px;
font-family: arial, sans-serif;
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: 348px;
border-width: 0px;
}
#tabs-wrap embed {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
border-width: 0px;
height: 200px;
}
#tabs-wrap .widget {
margin: 0px;
padding: 5px 10px 10px;
float: left;
width: 348px;
list-style-type: none;
}
#tabs-wrap .widget ul {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
}
#tabs-wrap .widget li {
margin: 0px 0px 5px;
padding: 0px;
float: left;
width: 348px;
line-height: 16px;
color: #666666;
}
#tabs-wrap .widget ul li {
margin: 5px 0px 0px;
padding: 0px;
float: left;
width: 348px;
color: #666666;
}
#tabs-wrap .widget li a {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px 0px 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zWCozJiPdc0QDAh0YHcS8ljdGEtcFbhW8-2HBCygoacyoAzrGSe3mXgL4vZH7DmCe-qA3JtdVGTbP9jblDzfcO-m8wx2ZCFMIENiVojabXV29tgqOJUKGXwTz1-7gaOw1XYXSjNUTwTX/) no-repeat 4px 2px;
float: left;
}
#tabs-wrap .widget li a:hover {
color: #990000;
text-decoration: underline;
margin: 0px;
padding: 0px 0px 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zWCozJiPdc0QDAh0YHcS8ljdGEtcFbhW8-2HBCygoacyoAzrGSe3mXgL4vZH7DmCe-qA3JtdVGTbP9jblDzfcO-m8wx2ZCFMIENiVojabXV29tgqOJUKGXwTz1-7gaOw1XYXSjNUTwTX/) no-repeat 4px 2px;
float: left;
}
#tabs-wrap .nolist {
margin: 0px;
padding: 10px;
float: left;
width: 348px;
list-style-type: none;
font-size: 1em;
line-height: 18px;
}
.nolist a {
color: #CC0000;
text-decoration: none;
}
#tabs-wrap .nolist ul {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
}
#tabs-wrap .nolist li {
margin: 0px 0px 5px;
padding: 0px;
float: left;
width: 348px;
line-height: 24px;
color: #000000;
}
#tabs-wrap .nolist ul li {
margin: 5px 0px 0px;
padding: 0px;
float: left;
width: 348px;
color: #000000;
}
#tabs-wrap .nolist li a {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
}
#tabs-wrap .nolist li a:hover {
color: #990000;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
}
#tab_one {
}
#tab_two {
}
#tab_three {
}
#tab_four {
}

.tab_one {
float: left;
width: 368px;
padding: 5px 0px 10px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_two {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_three {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_four {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}

</style>

Note:Host dom.gif and radio.gif images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<!-- (TABS) -->
<div class='domtab'>

<!-- Tabs titles -->
<ul class='domtabs'>
<li><a href='#tabone'>Popular</a></li>
<li><a href='#tabtwo'>Recent</a></li>
<li><a href='#tabthree'>Tutorials</a></li>
<li><a href='#tabfour'>Comments</a></li>
</ul>

<!-- Tabs content -->
<div id='tabs-wrap'>


<div class='tab_one'>
<h2><a id='tabone' name='tabone'/></h2>
<ul>

<!-- TABS 1 CONTENT HERE -->

</ul>
</div>


<div class='tab_two'>
<h2><a id='tabtwo' name='tabtwo'/></h2>
<ul>

<!-- TABS 2 CONTENT HERE -->

</ul>
</div>


<div class='tab_three'>
<h2><a id='tabthree' name='tabthree'/></h2>
<ul>

<!-- TABS 3 CONTENT HERE -->

</ul>
</div>


<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<ul>

<!-- TABS 4 CONTENT HERE -->

</ul>
</div>


</div>
</div>

Note:Replace TABS X CONTENT HERE with your contents and change tab names as your choice.

You are done.

Demo

New Blog Online

Blog Archive

Pure 4 Tab View Widget to Blogger/Websites

0 comments:

Post a Comment

Popular Posts