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>
</div></div></div></div>

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.