Saturday, May 10, 2008

How I Made the Tab Link/Nav Bar

Mrs. SmockityFrocks asks in my latest soliciting-opinions post how I did the tab link/navigation bar right above the main post body. Well, I will tell you that I am no HTML / CSS expert, so I give the disclaimer that my method is neither slick nor pretty, but it worked for this blog. Hopefully it will work after a bit of effort, if anyone ever tries to implement it (you know who you are, Mrs. SmockityFrocks!).

When you begin, the top of your main post will look something like this:

Make sure to back up your template before you mess things up! Then, go to Layout, then Edit HTML. (BTW, I suggest making a test design blog to be your guinea pig)

Depending on what template you're using, you should see something that resembles this. I inserted the HTML right between the main-wrap1 and main-wrap2 opening tags. For other templates, this might translate to putting the HTML right after your first main wrapper div tag.

This is the HTML that you insert:
<div style='background-color:#XXXXXX;'><div align='center'><div style='background-color:#XXXXXX; width:XXXXpx;'><div style='background:url('http://LOCATION OF IMG');'>
<a href='http://YOURBLOGNAME.blogspot.com/' title='Home'>Home</a> | <a href='about-this-blog.html' target='new' title='About This Blog'>About</a>

What we're doing here is manually creating a section right above the main post body, sort of like what I've highlighted in the picture below.

The width of this new section defaults to the width of your post body. I believe the height is defined by whatever you put in there, so if your font's height is 10 pixels, then the box height will be slightly more than 10 pixels.

  • The first <div> tag sets the background color of the box. I couldn't figure out how to tell it to be transparent. This might not work well if you have a tiled image as your blog background. My background is an approximation of an Old Gold (Go Tech!) flat background, so I just set the first <div> to #ffcc66.

  • The third <div> is to set the background of the actual "tab" itself, along with the width of the tab. This is white (#ffffff) on my blog.

  • The fourth <div> tag sets the background image, which I use to round off the corners. ">Here is mine, so you can have an idea of what I'm talking about. If you are going to round off the corners like I did, it is important that the width of the image be the same as the width that you set in the third <div> tag. You'll have to host the image somewhere; I use PhotoBucket

  • Obviously you can add more links to the "tab" bar. You will have to adjust your background image and width in the 3rd <div> tag if you do so.

So then we are left with something like this:

The problem is, now the tops of the sidebars and the main post body don't match up. If you don't care about the alignment, then you don't need to worry. But if you want the tops of both the sidebars and main body to line up, you'll have to adjust the "margin" property in your CSS template for your sidebars. I did some thinking to save you the effort: first, figure out how much separation you want between the header and the tab (say, 10 pixels). Then find out how tall your tab background image is (mine's 21 pixels). So then set your sidebar top margins to be 21 + 10 pixels = 31 pixels. That did it for me.

A few additional notes:
1) I have like less than 0 skills when it comes to image creation. I made my rounded tab images in Paint. You are free to steal the rounded tab image from this blog and use it as a starting point, if you'd like.
2) If you'd like for the tab links to pop up in new windows, modify your link tag <a> to include the 'target' attribute. For example:
<a href="about.html" target="new">
3) Considering that there are plenty of other tutorials out there on how to do things like this, I do not expect a ton of people to have questions about this. So if you do run into problems, you can feel free to grill me about it.

Related Posts:

2 have poured out their souls in electronic text:

  • Smockity Frocks

    Thank you! I have backed up my template before and then when I tried to go reinstall it (or whatever you call it. I'm very technical...) I only got error messages. The test blog is a good idea.

  • JunkMale


    I've had that problem too, when trying to reinstall old templates. I can't recall right now why that happens sometimes. Once I was in the most unfortunate circumstance where our blog's colors and/or layout was totally messed up, but uploading a previous template wouldn't work either! Argh. I think I had to just change things back manually. So! Test blogs are a must if you like tinkering around behind-the-scenes.

    If you don't really care for people to come across your test blog, make sure to set options so that only blog authors can read it. That's what I have done with mine (as much as you want to read a broke down blog with errors all over the place).

    You might know this, but you don't have to start all over with the test blog. Right when you create a new blog, you can upload your current blog's template, and a lot of the formatting will be preserved,and you do not have to re-do all your colors again. However, any widgets which require a specific blog name (for example, Recent Comments) won't work.

    I also use my test blog to test-post:
    Sometimes when I am writing blog posts and hit "preview," my desired formatting doesn't show up. It's only when I actually publish the post that the desired formatting shows up. Of course, if you can't preview, you can't know for certain that the formatting will be in place. So I just copy entire post over to my test blog and publish. That way I can see what the post will look like in "real life" published mode, but no one else can see it, in case it's really messed up.