.
Hey everyone! GFC will be discontinued soon for Wordpress Blogs, so be sure to follow with LinkyFollowers instead! I don't want to lose any of you! Thanks!! :D

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!

11 comments:

  1. I will be using this as soon as I can...thanks so much for giving me a way to make my baby blog look a bit more "big girl"!

    ReplyDelete
  2. Thank you so much for sharing! I have a question. At the top of your blog you have a place where there are page link, one for HOME, WHERE I LINK, CONTACT, ETC... How do I do that? I so far just have HOME, but I can't seem to figure out how to put more because it's only letting me put one in if I use Blogger's gadget. Can you help me, I would appreciate it! Thank You and your blog looks great!

    HUGS,
    Annamaria

    ReplyDelete
  3. @ Art by ASM - I commented on your blog. Shoot me an email and we'll get that figured out.

    courtney@betweenunandme.com

    ReplyDelete
  4. Very cool tutorial. Thanks so much for the share!

    ReplyDelete
  5. Hi Courtney! I'm having lot's of fun with this gadget and I've got it installed on my blog. My question is about your "contact" form - where did you get that? Thanks so much for your tutorial!

    ReplyDelete
  6. This is so cool! I've been wanting something like that for my blog. Thank you so much!!

    ReplyDelete
  7. Thanks so much for sharing! I need as many blogging tips as I can get. Found you at Its So very Cheri link party.
    -Mackenzie @ www.fridaynightdatenight.blogspot.com

    ReplyDelete
  8. TFS!! Stopping by from Its So Very Cheri linky party and your newest follower.

    This is what I shared this week: http://craftybrooklynarmywife.blogspot.com/2011/10/knitting-and-loving-it.html

    ReplyDelete
  9. Thanks for sharing this really helpful tip! I am going to have to play around with it over the weekend.

    ReplyDelete
  10. Hello! Me again.. just wanted to let you know I've linked this to my "blogging" post today, it's a great tutorial!

    ReplyDelete

Thanks so much for the comment! I, seriously, love and treasure each one!

Share

Widgets