How To ADD Awesome Multi-Tab Widget For Your Blogger

Friends, Now i share a awesome multi-tab widget. Its very easy to customize with your blogger layout. It look like a and professional. You can add three different contents in one widget .When ever you click on any tab on right side then it will open like this way that a curtain comes from bottom and exhibits the content. Double click on a same tab will drop up/down the tab automatically. You can add this stylish widget to your blogger. Just follow this post to add this widget in to your blog.

multi -tab widget for blogger(masterhacksindia.blogspot.com)

Now Go to Blogger Dashboard

Go to Layout option

Click on Add a Gadget

Select HTML/JavaScript option from given list.

Copy below code and paste it in HTML/JavaScript box.

<style>
#tabbed_box_1 {
 margin: 0px auto 0px auto;
 width:300px;
}
.tabbed_area {
 border:1px solid #494e52;
 background-color:#636d76;
 padding:8px; 
}

ul.tabs {
 margin:0px; padding:0px;
 margin-top:5px;
 margin-bottom:6px;
}
ul.tabs li {
 list-style:none;
 display:inline;
}
ul.tabs li a {
 background-color:#464c54;
 color:#ffebb5;
 padding:8px 14px 8px 14px;
 text-decoration:none;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 border:1px solid #464c54;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVQzcNCy3I-5L8Yxr59UPcq17ylc6-sTpx17swMIyRYijT0yub6JxHKkbrmRk0xQRWtDTukeIuHX328BtWq2SfpqIq4m5K0rNIUfgFsNC0veW7UjO0avP9bAexJWD95U1qj6jzSIBtt3M/s1600/tab_off.jpg);
 background-repeat:repeat-x;  
 background-position:bottom;
}
ul.tabs li a:hover {
 background-color:#2f343a;
 border-color:#2f343a;
cursor:pointer;
}
ul.tabs li a.active {
 background-color:#ffffff;
 color:#282e32;
 border:1px solid #464c54; 
 border-bottom: 1px solid #ffffff;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUyMwB065IxzlZKPUeyLYTsaXSo1_3x7t14EJW_JFB-NI9lIxrOQrUT_R7za7-hbhDSQ4KeGdnaqft3MKfwxoxbigh9Nctbrv2pLOggJhs72Noll3L2YLedKO07UXF-PST4PuxOU3WymOr/s1600/tab_on.jpg);
 background-repeat:repeat-x;
 background-position:top; 
}
.content {
 background-color:#ffffff;
 padding:10px;
 border:1px solid #464c54;  
 font-family:Arial, Helvetica, sans-serif;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkN-pTf41LQCtyp50Zf62YO_cYTb72cmTYXVbf2TgiCwbAqPpJ-oz2ssjRQJBIlojueZzKmmhLu5wOBVbZNEr6R8wEmt7ppU13UynRCioWEeZwWlP6cXb7DvsiW9IhhlZZlu-3r5F3hF4/s1600/content_bottom.jpg);
 background-repeat:repeat-x;  
 background-position:bottom; 
}
#content_2, #content_3 { display:none; }

.content ul {
 margin:0px;
 padding:0px 20px 0px 20px;
}
.content ul li {
 list-style:none;
 border-bottom:1px solid #d6dde0;
 padding-top:15px;
 padding-bottom:15px;
 font-size:13px;
}
.content ul li:last-child {
 border-bottom:none;
}
.content ul li a {
 text-decoration:none;
 color:#3e4346;
}
.content ul li a small {
 color:#8b959c;
 font-size:9px;
 text-transform:uppercase;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 position:relative;
 left:4px;
 top:0px;
}
.content ul li a:hover {
 color:#a59c83;
}
.content ul li a:hover small {
 color:#baae8e;
}
</style>
    
    <script src="http://nettuts.s3.amazonaws.com/001_Tabbed/site/scripts/jquery-1.2.3.min.js"></script>
    <script>
 
   // When the document loads do everything inside here ...
   $undefineddocument).readyundefinedfunctionundefined){
  
  // When a link is clicked
  $undefined"a.tab").clickundefinedfunction undefined) {
   
   
   // switch all tabs off
   $undefined".active").removeClassundefined"active");
   
   // switch this tab on
   $undefinedthis).addClassundefined"active");
  
   // slide all content up
   $undefined".content").slideUpundefined);
   
   // slide this content up
   var content_show = $undefinedthis).attrundefined"title");
   $undefined"#"+content_show).slideDownundefined);
  });
   });
  </script>

<div id="tabbed_box_1" class="tabbed_box">
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a  title="content_1" class="tab active">TAB1-NAME</a></li>
            <li><a  title="content_2" class="tab">TAB2-NAME</a></li>
            <li><a  title="content_3" class="tab">TAB3-NAME</a></li>
        </ul>
        
        <div id="content_1" class="content">
<p>Tab one content goes here</p>
        </div>
        <div id="content_2" class="content">
<p>Tab one content goes here</p>
        </div>
        <div id="content_3" class="content">
<p>Tab one content goes here</p>
        </div>
    </div>
</div>