Ads 468x60px

.

Pure 4 Tab View Widget to Blogger/Websites(your blog Just not a blog anymore)

Pure 4 Tab View Widget to Blogger/Websites





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(http://2.bp.blogspot.com/_4HKUHirY_2U/Synp-xaXWXI/AAAAAAAAAh8/zokjVJq1Dos/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 #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(http://1.bp.blogspot.com/_4HKUHirY_2U/SynqBs3bR9I/AAAAAAAAAiE/yv3UV8JuDOg/radio.gif) 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(http://1.bp.blogspot.com/_4HKUHirY_2U/SynqBs3bR9I/AAAAAAAAAiE/yv3UV8JuDOg/radio.gif) 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.your blog Just not a blog anymore ;)

Don't Miss Another Post. Free Updates Like Us

Share this Article

Enter Your Email For Updates

Labels

Adsense (1) Automatic Backlink (11) b (1) Backlink (9) Blog beginners (134) blog designing (138) blog site (3) blog spot (1) Blog Templates Download (15) blog Tips and Tutorials (1) Blogger blog (4) Blogger help (4) Blogger Templates (1) Blogger tips (3) Blogger tutorial (5) Blogging Software (1) blogging tips and tricks (149) Blogging Tips and tutorials (156) Blogging Tools (131) Blogging widgets (101) Codes and scripts (72) Computer news and updates (31) Directorys (8) Ebooks (1) f (1) Facebook (16) Facebook And Blogger (1) Faceobook (1) Farmville (1) File hositng and sharing (2) Fonts and Images (1) Forums (1) Free online services (28) Freewares (34) Gadets (13) Games (3) Google (22) google blogs (3) how 2 start a blog (3) How do I Start a Blog (5) How do i start a blog for free (12) How do you start a blog (7) how to blog (1) How to Get Started Blogging for Yourself (1) how to start a blog (4) How to start a blog for free (3) How To Start A Free Blog (1) how to start blogging (1) how to write a blog (1) i pad (4) Internet (43) Internet money making tips and tutorials (7) make a free blog (1) Make a free blogger blog (2) make a free bloghow do i start a blog for free (1) make blog (1) make your own blog (1) Make your own web site (2) Make your own website free (7) Mobile (4) Photoshop plugins and tutorials (2) rss (3) Search engine optimization (52) Seo (55) Seo blogger (5) softwares (24) start a blog (4) start a blog how to (1) Start a blog Tips (1) start blog (6) start my own blog (1) start your own blog (4) Start your own blog free (2) starting a blog (5) starting a blog for free (2) Tips and Triks (58) Tips to Start Blogging Successfully (1) Twitter (4) updates (1) web designing (10) websites (1) Windows Tips and Triks (22) Wordpress (1) You tube (1)