How to add Multi Tab content widgets in blogger?


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.
add multi tab cotent widget for blogger





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.

add multi tab cotent widget for blogger2

1 comment:

  1. I am regular reader of your blog and no doubt it all stuff is awesome. The best thing about your sharing and posting is that you always provide content that is helpful for both the newbie and experts. Looking for more stuff and tutorials.

    Love from Tech Solutions Desk

    ReplyDelete

Please comment the message if you like post or any trouble