Monday, July 25, 2011


I'm posting this because I realize that this information is not really easily accessible online. I'm asked quite often, HOW DO I PUT TABS AT THE TOP OF MY BLOG? And before I figured out this trick, I was confused by it too.

So I'm gonna break it down for you. I don't do it the official "blogger" way, but I do it the NO-KNOWLEDGE-OF-HTML-WAY - which I'm hoping is a way that will work for you...

First things first, make your buttons. I literally just make little boxes that have words on them. I try to make sure the boxes are all the same size so that they lay in a straight line perfectly on the top. I also try to make sure that they're the same color as the background of my blog. This makes it seem like there's just words to click on and that there isn't an actual "box". So go ahead and make your tabs. You could use a program like that's free and totally easy to use. Example tabs - HOME, ABOUT ME, CONTACT, ETSY SHOP...

Once you've made them, upload them to a free photo hosting site. I use flickr, but some people use photobucket. Just pick one and upload them. When you have them uploaded, there should be a way to snag the html for that image. I use flickr, so I can only show you where you can find the html on that site.

That's the html that you're going to need to post your TABS at the top of your blog.

Now, go to your blogger dashboard and click on DESIGN. From there, click on ADD A GADGET and then select HTML/JAVASCRIPT. Paste your html of all of your tabs in there. Make sure to separate the html by a couple of spaces just to keep the tabs divided for your own sake. It'll make things more clear for you later.

Here's an example of what your html will look like. 

When you have all of the html pasted and listed, save the gadget and then drag it all the way to the top right under your banner. It's now on the top.

But now you need to put links attached to each tab. How do you do this?

Easy! Make blog posts dedicated to each tab. An about me post, a contact me post, an etsy shop post, etc. The trick is to DATE the post a few years back so it doesn't show up on anyone's feed (like on google reader). All my posts are dated for 2001. This will also put these posts to the very very back of your list of posts.

Once you make these posts, make sure to LABEL each post according to what you want your tab to be. So, my about me post is labeled - ABOUT ME. My PHOTO tab is labeled photo. Every time I blog about photography, I label it Photo and so when you click on my Photo tab, it'll show you all of my posts labelled in that way.

Publish it! Publishing it will give it a link. Click on your label at the bottom of the published post to get a link.

See the label PHOTOGRAPHY at the bottom? That's where you click to get your entire feed of everything you've labeled with that specific label. 

Now, take that link and go back to the HTML/JAVASCRIPT gadget that you dragged under your banner on the design page and post your link to the very first link on your html. Here's a picture of what it should look like. You're switching out the first photo link with the link to your tab.

Once you've done all of this - and trust me, it'll take you awhile - save and it should all be done! I like to center all of my buttons with
Simply put
in front of all of your html and then put
at the end of all of the html and this will center it on your blog.

I hope this isn't too confusing! Let me know if it helps!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...