Classifieds|Blogger Tips|SEO: Professional Multi Tab Widget For Blogger Blogs

Multi tabbed widget the most necessary and very important for blogs that are having maximum page load time.You may have added many useful widgets in your blog for different reasons.But adding more widgets makes your blogger blogs to load very slowly so that the visitor to your gets bored because the visitor has to wait for a long time to read your posts so that they immediately leave your site without navigating your site.This is one of the main reason for having high bounce rate and also having more lengthy widgets like blog archive,blog roll,popular recent comments and post widgets make your blog not user friendly and your site will not have a standard look.So by adding a multitab widget which combines two or more widgets to look a like one may help to solve all above said problems.This multitab widget is fully customised and even a new blogger can add this widget to their blogspotblog without any problem .

New and best Multi Tab Widget For Blogger Blogs

Other Related Useful Widgets You may Like

*Awesome Demo And Download Button
*RSS And Email Sidebar Subscription Widget For Blogger

To Add this follow these steps

1, Go To Blogger - Template- Edit HTML

2, Backup your template

3, Click the "Expand Widgets Template" box

4, Search for this,

]]></b:skin>

And just above it paste the following code,

/---------- THREE MULTI TABS -------------/

.MULTI-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}

.MULTI-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}

.MULTI-tabs li:first-child{margin:0}

.MULTI-tabs li a {

color: rgb(255, 255, 255);

background: none repeat scroll 0% 0% rgb(58, 57, 56);

padding: 5px;

display: block;

text-decoration: none;

font: bold 12px Arial,Helvetica,Sans-serif;

border-bottom: 3px solid #000;

border-left: 3px solid #000;

border-radius: 3px;

}

.MULTI-tabs li a:hover,.MULTI-tabs li a.MULTI-tabs-current{background:#666;color:#fff;text-decoration:none}

.MULTI-tabs-content{background:none;}

.MULTI-tabviewsection{margin-top:10px;margin-bottom:10px;}

5,Next search for this code,

Below that paste the following code

jQuery(document).ready(function($){

$(".MULTI-tabs-content-widget-MULTI-id").hide();

$("ul.MULTI-tabs-widget-MULTI-id li:first a").addClass("MULTI-tabs-current").show();

$(".MULTI-tabs-content-widget-MULTI-id:first").show();

$("ul.MULTI-tabs-widget-MULTI-id li a").click(function() {

$("ul.MULTI-tabs-widget-MULTI-id li a").removeClass("MULTI-tabs-current a");

$(this).addClass("MULTI-tabs-current");

$(".MULTI-tabs-content-widget-MULTI-id").hide();

var activeTab = $(this).attr("href");

$(activeTab).fadeIn();

return false;

});

</script>

<li><a href='#widget-MULTI-id1'>Posts</a></li>

<li><a href='#widget-MULTI-id2'>Recent Posts</a></li>

<li><a href='#widget-MULTI-id3'> Comments</a></li>

</ul>

<b:section class='sidebar' id='sidebartab1' preferred='yes'/>

</div>

<b:section class='sidebar' id='sidebartab2' preferred='yes'/>

</div>

<b:section class='sidebar' id='sidebartab3' preferred='yes'/>

</div>

Note:This widget works properly only if you had already added jquery script to your blog Or just follow the below steps to add this script.

Find

</head>

Just above that paste the following cod

Save your template.

Now you check your bloggerblog for nice changes that you have made.

For any other customizations and doubts contact me or drop down in comments.

25. 26. Professional Multi Tab Widget For Blogger Blogs 27. 28.