Blog 101 - How to Create A Multi Tabbed Navigation Gadget in Sidebar for Blogger - {Tutorial}

I have been wanting to change up my blog for awhile now, but I haven't been able to bring myself to pay upwards of $60 (even as high as $400!) for someone to design something for me. So, I dedicated a large amount of last weekend to sprucing up my blog and making it look more professional and also easier to navigate. Since then, I have had a pretty awesome response from all of you (Thanks!) and I've also received a lot of questions. So, because of this, I thought I would share the absolute best (and easiest) ways to give your blog a new look as well.

--------

A lot of you have been asking me about the Multi Tabbed Navigation Box you see at the top right of my blog with the About, My Buttons, Sponsor, and Contact tabs on it, so I thought I wold start there. A lot of tutorials out there have you going in to Template > Edit HTML and I am fine with that, but if it's at all possible I'd like not to, and so I found a way to just add a gadget on the sidebar with out having to play with your HTML. Here we go...


* Warning - If you use Internet Explorer, you might get an error message, "Operation Aborted." You will need to preview this gadget before you go live with it. If you do get the error message, then this is not the gadget for you. I'm sorry. :(


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>

<div id='codeholder'><p><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

Notes:


- The RED is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. If you have no idea what jQuery is, then you probably haven't loaded it already and so just leave it.
- The BLUE is where you would specify how many tabs you want.
- The GREEN is where you would change the box background color. The default box background color is white (#fff).  To look for color in HTML visit HERE.



5. Place your new HTML/Javascript gadget above the other gadgets that you would like "tabbed."

6. Click Save Arrangement and take a look at your blog!

More Notes:

- Make sure that your "tabbed" gadgets have a title.

- If all of your tabs aren't lining up at the top and there are one or two that are on a second row, you're going to need to shorten your "tabbed" gadgets title and/or you need to go to Template > Customize > Adjust Widths and play around with the width of your blog to get all the tabs on the same row. 

Enjoy and I hope you're having an awesome day!