ADD Awesome Multi-Tab Widget For Your Blogger

   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.
 

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/AVvXsEi_UiVQqd2-i8QeR8KfeAogEoNDtN_m-bFkzAP9KByNnYwOybhpxZr72WbQnwDSZ271dMBVlbq3-iev9OMg2VtA5HwR6zTFENl5VAIWFp8A141KUcpq0aCl6AJHEO_nfgmYrj8LtU2Mum8f/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/AVvXsEg8V1A-M2dXh1hY0rQ5hBbGmJQ9M0ODpqCrw1IhH7nelGU6jW4UVQl5QRf6lYGN5mg7_893fVRSgx39YPu480j4RcrKEd1ms6gJFqbgpiiQ_dNQ4pNry5nxnG0yLUrwKqueAvKHQ2EKbmE5/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/AVvXsEjPC-3qBIHk9YqOaMgmFcCIvzKZ-vfeq8w5Dy5sXqddkEQzvPj51QateWJ6ItFE-u9_IlgYyD2JpPMuZxV8ZrACagb6GQ9y_KAHt_hvAP3RL42qsuc-oMwtCgUgETrFj34wealRMPd87gjo/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>

Change highlighted RED color with Your Tab Name and Contents

• Save it.

Leave a comment …… If you like this widget………………..

Posted in: Blogs and Websites