Because I've gotten a few emails about my lovely tabs as well as some nice comments, and because some other blogger was nice enough to divulge the secret of the tabs to me, I feel compelled to give you the step-by-step instruction on how to make tabs in the header.
First, you have to make it so that you can add gadgets into your header space.
To do this click Customize > Edit HTML
Go all the way to the bottom (just past the /*Footer section) of your HTML and look for the <body> tag. Just under that you will have something that looks like:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
Only yours will have different input, including maxwidgets of 0 or 1. But you want to change it so that it looks like the line above. Either change it manually or simply copy and paste. Save the HTML, and now you should be able to add a new gadget into the header on the Page Elements editing page. Check to make sure you can before you move on to the next step.
Next, go back to your Edit HTML page. You will see a section titled /*Links and then a section titled /*Blog Header. Between these you want to past this code:
/* Menus
-----------------------------------------------*/
div.horizontalmenu a {
font: bold 10pt Georgia;
margin: 2px;
width:180px;
padding:2px;
background: #cccccc;
border: #B3B3B3 3px solid;
color: #4768DE;
text-decoration:none;
}
div.horizontalmenu span {
padding: 6px;
}
div.horizontalmenu a:hover {
background: #4768DE;
} in:
This CSS code will make your tabs look just like mine, but you can change the colors by changing the color # on each object. You can find a helpful CSS color coder on the Internet (like this one) to help you pick your colors. You can also change the font to whatever you want by typing in the pt weight or font name that you like. I also played with the margin width and padding to see what did what. You may or may not see anything yet if you preview, you still have to do the next part.
Okay lastly, go to your Page Elements page and add a gadget into the header space (make sure it stays above your header, unless you want the tabs to show up under your header picture). Click to add an HTML/Javascript element. Paste this code into the box:
<div class="horizontalmenu" align="center">
<a href="#"><span>Home</span>
<a href="#"><span>About Us</span>
<a href="#"><span>Products</span>
<a href="#"><span>Customer Service</span>
<a href="#"><span>Support</span>
</a></a></a></a></a></div>
Replace the # with the url of the post or page that you want that tab to point to. Change the labels ("Home", "About Us", etc.) to whatever you would like them to be. You can add or remove tabs by adding or removing <a href> lines and </a> end tags.
There is endless play with these things. You can always experiment with the HTML - just make sure you preview it before you save!
Note to Self: If you try it and have problems, let me know in the comments, and I will try to address them as soon as I can. Please note that this only works in Blogger.
[Also Note: This post was really hard to write because you have to use alternate text for the HTML for it to show up in the post instead of doing what the code tells it to. So, Merry Christmas you ungrateful kids!]
Wednesday, September 17, 2008
Tabalicious
Subscribe to:
Post Comments (Atom)
2 comments:
That seems way too complicated.
Im glad I have wordpress. Its so much nicer, I think than blogger.
My last blog was on blogger.
it was even more plain than the one I have now.
Matt - Blogger has some good possibilities if you just take the time to figure it out. I have felt like blogger has nicer templates than worpress (at leats from all the blogs I've seen), although wordpress seems to have less bugs.
Post a Comment