Smart Multi Tab Widget to Blogger/Websites

Posted by Lasantha Bandara on December 16th, 2009 File Under : css, java script, widget3 Comments

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.

Smart Multi Tab View Widget to Blogger/Websites

<script type='text/javascript'>

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie:

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")

var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)


expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
 if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
 else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
 this.expandtab(tabref) //expand this tab

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
 var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
else if (dir=="prev"){
 var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
 this.cancelautorun() //stop auto cycling of tabs (if running)

setpersist:function(bool){ //PUBLIC function to toggle persistence feature

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref

var RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
 this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
 ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array

for (var i=0; i<this.subcontentids.length; i++){
 var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop) "block" : "none" //"show" or hide sub content based on matching id attr value

var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
 //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
 document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
 if (tabposition==this.hottabspositions[i]){

autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)

if (typeof this.autoruntimer!="undefined")

var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
 this.tabs[i].tabposition=i //remember position of tab relative to its peers
 if (this.tabs[i].getAttribute("rel")){
  var tabinstance=this
  this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
  this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
   tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
   return false
  if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
  if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
   selectedtab=i //Selected tab index, if found
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
 this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
 this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
 this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
} //END int() function

} //END Prototype assignment


<style type='text/css'>
.btabs{padding:3px 0;margin-left:10px;margin-top:1px;margin-bottom:0;font-family:&#39;Lucida Grande&#39;,&#39;Lucida Sans Unicode&#39;,Sans-serif;font-size:1.1em;list-style-type:none;text-align:left}

#tabbody{width:98%;margin-left:10px;padding:10px 4px;background-color:#1a1a1a;color:#fff;border:1px solid #1a1a1a;margin-top:2px}

.btabs li{display:inline;margin:0}

.btabs li a{text-decoration:none;position:relative;z-index:1;padding:5px 7px;background-color:#828282;border:none;color:#fff;margin-right:-2px;outline: none;}

.btabs li a:visited{color:#fff;}

.btabs li a:hover{text-decoration:none;color:#fff;background-color:#545454}

.btabs li a.selected{color:#c7c7c7;position:relative;top:0}

.btabs li a.selected{background-color:#1a1a1a;color:#fff}

.btabs li a.selected:hover{background-color:#1a1a1a;text-decoration:none}

.tabcontent .sb_comment_author{color:#696969;font-size:10px;}

.tabcontent li{color:#b7b7b7;display:block;padding:5px 6px;border-bottom:1px solid #111;border-top:1px solid #222}

.tabcontent li:hover{}

.tabcontent li a{color:#CDCDCD;text-decoration:none;font-size:11px;outline: none;}

.tabcontent li a:hover{color:#27d;text-decoration:underline}




.tabcontentstyle{border:1px solid gray;width:450px;margin-bottom:1em;padding:10px}




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.

<ul id="sidebartabs" class="btabs">

<li><a href="#" class="selected" rel="tab1">Popular Post</a></li>
<li><a href="#" rel="tab2">Recent Posts</a></li>
<li><a href="#" rel="tab3">Other Topics</a></li>


<div id="tabbody">

<div id="tab1" class="tabcontent">





<div id="tab2" class="tabcontent">





<div id="tab3" class="tabcontent">






<script type="text/javascript">
var countries=new ddtabcontent("sidebartabs")
countries.setselectedClassTarget("link") //"link" or "linkparent"

Note:Change tab names as your choice.Replace Enter-Tab-X-Content-Here with your content.

You are done.


File Under : css, java script, widget

3 Responses to “Smart Multi Tab Widget to Blogger/Websites”

  1. Ronny Dee says:

    Nice tabs, thanks for sharing

  2. Charan says:

    thank you so much buddy... good job done.

    after doing all my customization the widget seems like this in my blog.
    To check it out come to my blog.

  3. Emma says:

    How to add thumbnail with it ?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.