Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Advanced Multi Tabbed Widget For Blogger

by Durodola Ridwan | Wednesday, September 12, 2012 | 41 Comments

This is a new version of multi tabbed widget, in my previous post i have discuss on how to add a multi tabbed widget but that's an old version of multi tabbed widget and not fully widgetized because you can't add blogger official widget like archive, about me, labels e.t.c except you create a html code for the widget, but with this new version of multi tabbed widget, you can add both blogger official widget and html codes.
By default this widget will appear at the top of your sidebar, but i will also discuss on how you can place it at the bottom of your sidebar and i have made it so simple to implement, just follow the few steps below and get your multi tabbed widget appeared on your blog.


Multi Tabbed Widgets
Advanced multi tabbed widget for blogger - Style 02




How To Add The Multi Tabbed Widget

STEP 1
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before ]]></b:skin>
/*----- Multi Tabbed Widget By www.realcombiz.com----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.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:#8F8C7C;background:url(http://3.bp.blogspot.com/-MUXuRR6xp_Q/UFBUonr7c4I/AAAAAAAAA-4/MLVU1IM6Z6Q/s1600/rb+multi+tabbed+widget.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://3.bp.blogspot.com/-MUXuRR6xp_Q/UFBUonr7c4I/AAAAAAAAA-4/MLVU1IM6Z6Q/s1600/rb+multi+tabbed+widget.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}


STEP 2
  • Now find <div id='sidebar-wrapper'> but in some templates especially the new blogger templates, you may not find that, then find <div class='column-right-inner'> and paste the following code below/after any of the code you find
<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'>Archive</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Labels</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Comments</a></li>
<li><a href='#widget-themater_tabs-1432447472-id4'>About</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: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: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:section>                                      
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
</b:section>                                      
</div>

</div>

<div style='height:5px;clear:both;'/>
  • Replace Archive, Labels, Comments and About with the title of each tab you are adding and click "SAVE TEMPLATE"
  • Now go to "Page elements" and you will see something similar to the image below at the bottom of your sidebar layout





  • Click "Add a Gadget" to start adding gadget under each tab.
Positioning

As i have said earlier on, the widget will appear at the top of your sidebar but if you which to position it at the bottom of your sidebar then follow this step.
Instead of adding the code in step 2 below any of the two code above, paste it above </div> as shown in the image below


That's all, keep adding more widget and enjoy.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

41 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice share really I like it great day 4U and keep in touch.

    ReplyDelete
    Replies
    1. Thanks for the awesome comment, have a lovely day too :)

      Delete
  2. Nice Idea about positioning i just added on my blog http://airtet.in

    ReplyDelete
  3. I wanna ask something. How to place the tabbed widget between two widget that untabbed?

    ReplyDelete
  4. Great job! well done! how i can change the position from sidebar? http://musicworldbastards.blogspot.gr/ this is my blog and you will understand what i mean. my blog body is custon...

    ReplyDelete
  5. Can you help with copy and past code?

    ReplyDelete
  6. There are no dots above "add a gadget"
    where is the problem? even though i copy and paste.
    will the arrangement of code or the spacing between line/spacing before the code affect the result?

    ReplyDelete
  7. TTTHHHHANNNXXX sooo much!!!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  8. not working in my blog, there is no such code "div id='sidebar-wrapper" and this "div class='column-right-inner" when I try to paste it in HTML / Javascript, only the titles are there, there is no contents, how do I fix it?

    ReplyDelete
  9. thank you boss on the share of a comment on the widget, and greetings blogwalking

    Obat Perangsang Wanita

    ReplyDelete
  10. Hey, thanks for the widget. I have two columns at my right sidebar, but I wish to have this widget only on either one of the columns. If I paste the code under "column-right-inner", the widget will occupy two columns (i.e. at the centre). May I know if it is possible to do so?Your help is very much appreciated. Thank you.

    ReplyDelete
  11. http://www.jualobatbius.biz Jual Obat Bius, obat tidur, obat bius cair, obat bius bubuk, Alat Bantu Sex, Obat Perangsang Wanita dan Pria
    www.spesialisseo.com Jasa SEO, PPC dan SEM Indonesia Profesional kami dirancang untuk membawa bisnis Anda ke tingkat yang lebih baik. Kami akan membantu Anda menemukan lebih banyak pelanggan secara online dan membuat lebih banyak penjualan, serta meningkatkan Rating website anda pada halaman #1 google www.spesialisseo.com

    ReplyDelete
  12. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write
    Packers and Movers Bangalore
    Packers and Movers Hyderabad
    Packers and Movers Pune

    ReplyDelete
  13. I would like to say thanks for this great full post because its very need full post for me ans want request please share more.
    Call Girl in Jaipur
    Escorts in Dehradun
    Call Girls in Dehradun
    Escorts in Gurgaon
    Escorts in Delhi

    ReplyDelete
  14. Vijay Packers and Logistics Powai Mumbai is one of the leading Service Providers for Packing and Moving of goods and supplies. Our range of service comprise of Packers And Movers In Mumbai, Insurance, loading and Unloading , Packing and Moving Services, Relocation Service, transport and Warehousing services, household shifting service, car transportation service, local packing and moving service.
    Packers And Movers In Mumbai @ http://www.packersandmoverspowai.co.in
    Packing and Moving Services Mumbai @ http://www.packersandmoverspowai.co.in
    Car Transportation Services In Mumbai @ http://www.packersandmoverspowai.co.in
    Household Relocation Services In Mumbai @ http://www.packersandmoverspowai.co.in

    ReplyDelete
  15. Vijay Packers and Logistics Powai Mumbai is one of the leading Service Providers for Packing and Moving of goods and supplies. Our range of service comprise of Packers And Movers In Mumbai, Insurance, loading and Unloading , Packing and Moving Services, Relocation Service, transport and Warehousing services, household shifting service, car transportation service, local packing and moving service.
    Packers And Movers In Mumbai @ http://www.packersandmoverspowai.co.in
    Packing and Moving Services Mumbai @ http://www.packersandmoverspowai.co.in
    Car Transportation Services In Mumbai @ http://www.packersandmoverspowai.co.in
    Household Relocation Services In Mumbai @ http://www.packersandmoverspowai.co.in

    ReplyDelete
  16. This was actually what i was looking for, and i am glad to came here! Thank you very much
    publicoton
    snack
    wordpress
    blogspot
    webstarts
    postbit
    usite

    ReplyDelete
  17. Really impressive post. I read it whole and going to share it with my social circles. I enjoyed your article and planning to rewrite it on my own blog.
    Independent Escorts in Delhi -

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger