Unordered List

Friday, March 8, 2013

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.
 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/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………………..









0 comments:

Post a Comment