Sidebar Multi Tabbed Widget With Jquery For Blogger

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.

• 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 {
color:#333;
}
.tabdiv a:hover{
 color: #2676A1;
 }
.tabdiv ul{
 list-style-type:none;
 margin:0px 0px;
 padding:0px 0px;}
.tabdiv ul li{
 height:100%;
 line-height:28px;
 padding: 0px 0px 0px 0px;
 color:#333;
}
.tabdiv li a:link,.tabdiv li a:visited{
 background:#f9f5f1;
 display:block;
 margin-left:5px;
 overflow:hidden;
 line-height:24px;
 padding:2px 5px ;
 margin:2px 0px;
 color:#6F6B53;
 font-size:13px;
}
.tabdiv li a:hover {
 background:#fff;
 color: #3F200C;
 text-decoration:none;
         }
.ui-tabs-hide {
 display: none;
         }
</style>

• 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’ } });

});
</script>

<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>
</ul>
<div class=”tabdiv” id=”tab11″>
<script language=”JavaScript” src=”http://feed2js.org//feed2js.php?src=https%3A%2F%2Fmybloggerguides.com%2Ffeeds%2Fposts%2Fdefault&amp;num=5″ type=”text/javascript”></script>
</div>

<div class=”tabdiv” id=”tab22″>
<script language=”javascript”>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = “https://mybloggerguides.com/”;
</script>
<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 
e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var 
e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var 
e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var
 b=0;b<postTitlear.length-1;b++){for(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>’);
</script>
</div>
<div class=”tabdiv” id=”tab33″>
<script language=”JavaScript” src=”http://feed2js.org//feed2js.php?src=https%3A%2F%2Fmybloggerguides.com%2Ffeeds%2Fcomments%2Fdefault&amp;num=5″ type=”text/javascript”></script>
</div>
</div>

• 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.

Conclusion: