In some blogs and websites there a gadgets occupy huge amount of space on the sidebars.Due to which the visitors to feel many gadgets on the sides.Sometimes it may take sometime to load the page.So,friends here is the Multi tab widget or gadgets ,which make the your gadgets to like look like menu with Headings.Your blogger visitor can select widget as he like.
LIVE DEMO
Procedure to add the Multi tab Content widget for blogger
► Go to blogger► Design(page elements) or Layout
► Add a gadget—>> Html/java script –>>
► Add Below code in the empty box (Please don’t write any gadget title name,leave the title box empty)
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>
► Save Gadget and Go to part2.
How to arrange Multi tab content widget
► Arrange code box gadget box first
► Then your gadgets boxs next as below in image.
