Elegant Multi Tabbed Widget For Blogger Blogs / Fading Effect

Sup buddies? Another day another challenge. Today we will be looking at an elegant Blogger Multi Tabbed widget. Its fairly easy to install it and requires few steps to be followed. But first have a look at what we will  be achieving once we are done with this tutorial.

Demo

 
Notice the widget on the right of this blog. Liked it? So lets get started.

Step 1:

Go to Design >> Edit HTML and backup you template by downloading it.

Now search for the following code (Ctrl + F).

]]></b:skin>
Now just above this code add the following code.

/***----- BeH Multi Tabbed Widget ----***/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#4E4840;background:#EBEBE5;padding:5px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#756857;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Step 2:

Now search for the following codes. You need to find any one of them. The code basically refers to the sidebar where you have to add this widget code. And different Blogger templates uses different codes so search any one of them and if you cant find one, simply leave you blog's address ill try to help you out.

Search  for:
<div class='column-right-inner'> OR <div id='sidebar-wrapper'> OR <div id='rsidebar-wrapper'>

Once you find any one of them, add the following code below it.

/***----- BeH Multi Tabbed Widget ----***/
<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Followers</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>                                      
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>                                        
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>                                    
</div>
</div>
  That's all! Now to change the Headings of each tab, simply change the text highlighted e.g change (Followers) with what ever you want. Now click save template.

EnjOy :)


COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Elegant Multi Tabbed Widget For Blogger Blogs / Fading Effect
Elegant Multi Tabbed Widget For Blogger Blogs / Fading Effect
http://2.bp.blogspot.com/-ZSPvkAGLPxg/Tkiwfr-qCXI/AAAAAAAAAqM/5z6TVsEzW64/s320/multitabbed+widget.png
http://2.bp.blogspot.com/-ZSPvkAGLPxg/Tkiwfr-qCXI/AAAAAAAAAqM/5z6TVsEzW64/s72-c/multitabbed+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2011/08/elegant-multi-tabbed-widget-for-blogger.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2011/08/elegant-multi-tabbed-widget-for-blogger.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade