Oct 5, 2015

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="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.mybloggerguides.com%2Ffeeds%2Fposts%2Fdefault&amp;num=5" type="text/javascript"></script>

<div class="tabdiv" id="tab22">
<script language="javascript">
aBold = true;
home_page = "http://mybloggerguides.com/";
<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<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[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="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.mybloggerguides.com%2Ffeeds%2Fcomments%2Fdefault&amp;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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.