How to make multi-tabbed widget for blogger


Tabbed content box or tab view is a great way to maximize the usage of precious screen real estate on your blog.

There are quite a few tutorials out there that show how to create tabs with CSS and jQuery. However, most of them require you to modify your blog template codes. On top of that you also have to manually add the content of each tab.
Fortunately, with this tutorial you don’t have to go to all that troubles. All you have to do is add our tabber code into a HTML/Javascript widget. Once added, it will transform your Blogger blog’s existing widgets into tabs, automatically!

See the demo here.
  1. Below are some of the features of the tab content box:
  2. Accommodates unlimited number of widgets.
  3. Keeps the tabbed widgets’ original appearance.
  4. Fully widgetized for ease of installation and removal. If you don’t like what it does, simply remove the HTML/Javascript gadget.
Installation
  1. Go to Design > Page Elements and click Add A Gadget.
  2. Select HTML/Javascript widget.
  3. Leave the title box blank.
  4. Copy the code below and paste it inside the content box.
<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://bloggerehow.blogspot.com/2011/06/how-to-make-multi-tabbed-widget-for.html" target="_blank">Widget </a></p></div>
  • Red color line is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
  • Specify the number of widgets that you want to turn into tabs in Green color line.
  • The default box background color is white (#fff). You can change it in Blue color line. Apply the same color for the active tab’s background and bottom border.
5. Position the HTML/Javascript gadget above the gadgets that you want to tabify.

6. Click Save and view your blog.

Post-installation
  • Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles.
  • Reduce tab widths so that all tabs fit into a single row. This can be achieved by using short widget titles.
  • You may need to reduce the widths of the tabified widgets to fit them into the box.
  • Don’t forget to test in Internet Explorer. This widget may cause “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you :(

Enjoy!



11 comments:

ceejay said...

thanks for sharing this to me roy. :) it's a great thing to do to minimize the page lag. :)

alohagems said...

good one! i wanna hide my feedjit and chatbox. i will use it soon

SunflowerChocolate said...

It doesn't work for me.. :S

fun share said...

Best article shared. Thank you.

Unknown said...

your article is a copied one.
http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html

Iuliana@Hip2Thrift said...

I tried to install it, but it doesn't seem to work. Would you please take a look and let me know what I am doing wrong? http://www.hip2thrift.com/

Unknown said...

Saya rasa tips ini terlalu rumit, tapi saya harus coba. thanks
Armadhita Arief

N.D. Author Services [NDAS] said...

Breaks modern jquery / css menus throughout site. Do not use if you use a modern reponsive / adaptive template. Not compatible.

Pakcallgirl said...

very nice information Escorts in Islamabad
visit our website: http://www.islamabadescortgirls.com/

Pakcallgirl said...

That was really amazing information shared here by the blogger. I enjoyed reading a lot. Escorts in Islamabad
visit ou website: http://escortsislamabad.com/

Dating4Night said...
This comment has been removed by the author.

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Comments

Twitter Delicious Facebook Digg Favorites More