Sidebar Multi Tabbed Widget With Jquery For Blogger

A Blogger Always want a good looking blog for his blog and for a good looking blog we always want some extra features, extra (good looking) Blogger Widgets, and a good template. Now My Blogger Guides published hundreds of Blogger Widgets for all of you. We have shared many sidebar widgets, navigation/menu bars, subscription widget, Social media widgets, footer widgets, Block-quote style widgets and a lot of widgets for your blogger blog.
Multi Tabbed Widget For Blogger Blog
Multi Tabbed Widget

In this tutorial I’m going to share Sidebar Multi Tabbed Widget With Jquery For Your Blogger Blog. By using jquery, we can do more  thing  to our blog. Actually most of tabbed widget are not working well. So, This code working well. Above I’ve also provide you an screenshot of this widget. I’m using CSS, Jquery, HTML Language for  this tutorial. Good looking social media widgets can increase your followers and also attract your readers.

Recommended Blogger Tricks & Plugins

  1. 25+ Styles to Customize/Change Blockquote Style in Blogger.
  2. Disable Copy Function in Blogger Page instead Blockquote.
  3. Add Scrollbar Percentage Value Function to Blogger.
  4. Stylish Contact Form For Blogger! Never Seen Before.
  5. Cute & Stylish Popup Subscription Box for Blogger.

How To Add Sidebar Multi Tabbed Widget With Jquery to Blogger

By using this blogger widget you can show to your readers your recent posts, popular posts and recent comments. If you want to add these buttons in your blogger blog then read complete guide below. Follow all steps carefully which I’ve mentioned below.

Steps For Adding Sidebar Multi Tabbed Widget With Jquery to Blogger

  • Go To Blogger Dashboard.
  • Select Blog >> Go To Template >> Edit HTML
  • By pressing CTRL+F Search for </head> tag.
  • Now Copy below code and paste it just above of this tag.

border-right:1px solid #DFD2C3;
.tabdiv {
 padding: 5px 5px 5px 5px;
 font-family:Tahoma,Century gothic, Arial, sans-serif;
 border-bottom:1px solid #DFD2C3;
 border-left:1px solid #DFD2C3;
 border-right:1px solid #DFD2C3;
.tabdiv a:link,.tabdiv  a:visited {
.tabdiv a:hover{
 color: #2676A1;
.tabdiv ul{
 margin:0px 0px;
 padding:0px 0px;}
.tabdiv ul li{
 padding: 0px 0px 0px 0px;
.tabdiv li a:link,.tabdiv li a:visited{
 padding:2px 5px ;
 margin:2px 0px;
.tabdiv li a:hover {
 color: #3F200C;
.ui-tabs-hide {
 display: none;

  • Now Save Template.
  • Now Go To Layout >> Add A Gadget.
  • Select HTML/JavaScript.
  • Paste below code.

<script type=”text/javascript”>
var $jx = jQuery.noConflict();
$jx(document).ready(function() {
$jx(‘#tabzine> ul’).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });


<br />
<div class=”widgets545″ id=”tabzine”>
<ul class=”tabnav”>
<li><a href=”#tab11″> Recent </a></li>
<li><a href=”#tab22″> Popular </a></li>
<li><a href=”#tab33″> Comments  </a></li>
<div class=”tabdiv” id=”tab11″>
<script language=”JavaScript” src=”;num=5″ type=”text/javascript”></script>

<div class=”tabdiv” id=”tab22″>
<script language=”javascript”>
aBold = true;
home_page = “”;
<script language=”JavaScript” type=”text/JavaScript”>
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write(“<ul>”);function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<;d++){if([d].rel==”alternate”){[d].href;break}}for(var d=0;d<;d++){if([d].rel==”replies”&&[d].type==”text/html”){[d].title.split(” “)[0];break}}c=(aBold)?”<b>”+c+”</b>”:c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e=’
<li><a href=”‘+postUrlar[f]+'” class=”recent-link”>’+postTitlear[f]+”
 (“+postCommentar[f]+” comments)</a>”;document.write(e)}}function 
sortPosts(){function c(d,f){var 
a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write(‘<script src=”‘+home_page+”feeds/posts/default?max-results=”+numposts+’&orderby=published&alt=json-in-script&callback=showrecentposts”></script>’);
<div class=”tabdiv” id=”tab33″>
<script language=”JavaScript” src=”;num=5″ type=”text/javascript”></script>

  • Now change all highlighted colors into yours.
  • Now Save HTML/JavaScript.
  • That’s It. You have done it.
  • Now open your blog in new tab and enjoy this widget.


So above guide is about How To Add Sidebar Multi Tabbed Widget With Jquery to Blogger Blog Hope this recommended social media blogger widget increase your followers and also attract your readers. If you have any query or facing any problem then drop a comment below. Hope you will like this blogger widget. Do share.
Thank You! Stay Blessed!
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: