Today I’m tackeling a question from Lissa. She asked:
How do you make target links in the header – an example of what I mean is http://eightcrazy.blogspot.com/
Well Lissa, in the world of web design, there seems to always be 1000 ways to do the same thing. One person will use one method, while another person will use another. There are design standards, but within that, there is some freedom and flexibility.
I think from looking at eightcrazy‘s source code (btw, you know you can peek at someone’s source code by right-clicking on the page and selecting “view page source”, don’t you? Its super handy.) that she did a lot of template customization (and btw again…Shannon of Eight Crazy is a super talented designer and all-around cool gal! Check ‘er out.).
She probably started with a basic Blogger template and went into “Layout” and “Edit HTML” and tweaked to her heart’s content. My other guess is that she did what’s called “slicing” on her header when she created it in Photoshop. She divided her header into four sections, using a very clever design. (sorry Shannon…I hope I’m not giving away all your secrets!). Within Photoshop, there is a “slice” tool that divides your design into smaller pieces and creates images from them. In her HTML code, she arranged her slices, wrapped them in anchor tags ( <a href=”yoururl.html”> ) and thus created a full header.
Eightcrazy is a great example of what you can do with a little creativity and coding. Blogger offers a good starting point for people who just want to set up a basic blog and start writing. But there are also a lot of customization capabilities built in if you dig around a little bit. Here are a few resources I use when working with Blogger:
http://tips-for-new-bloggers.blogspot.com/
http://www.bloggertipsandtricks.com/
http://bloggerfordummies.blogspot.com/
Hope that answers your question, Lissa. Thank you, Shannon for providing today’s visual aid! 
Thanks Nicole for answering my question. There are a lot of ways of doing one thing isn’t there?
I just learned that you can divide the header into sections/widgets to do the same thing. Using photoshop is a bit harder to do, at least to me plus you would have to know the right codes and where to insert them.
I will however try all the links you suggested. Thank you!
[Reply]
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Joannah
http://keyboardpiano.net
[Reply]
Your website has been the most helpful one yet! Thank you for the explanation on this one. I’ve created my new header in photoshop, I’ve sliced it and assigned my slices their proper links but now I’m stuck! This is where you lost me…
In her HTML code, she arranged her slices, wrapped them in anchor tags ( <a href=””yoururl.html”” rel=”nofollow”> ) and thus created a full header.
Where in my HTML code do I stick my new header, complete with links and all… you are my one and only hope! Thanks for your great site!
Michelle
[Reply]
Hi Michelle!
So, from what I can tell looking more closely at the code, I think first you want to create an HTML widget under Layout/Page elements. You need to first upload your images to a photo service like PhotoBucket. Blogger doesnt really let you upload photos unless its in a post. Then, copy the image URL (it will look like “http://i234.photobucket.com/albums/ee298/oldrallychick/throwback_header-title-1.gif” …that one is from Eight Crazy’s blog). Then add your links around each one (<a href”… rel=”nofollow”>).
Now, you need to edit the HTML a bit. Go to “Edit HTML”, and scroll down a bit until you see “#header-wrapper”. You dont want this to show any longer so type: “display: none;” right under “border:1px solid $bordercolor;”. This should hide it.
Let me know how that turns out…if you have a problem with it, most likely someone else will too!
[Reply]
hi!
i’ve been reading your navbar tutorials, and i’ve got it figure out despite one step! can you please explain how you get the background color on blogger behind the links.. about, home, contact and so far. i’m looking to just place a thin solid color behind them. i’ve been googling galore and can’t seem to get it to work, even with looking at page sources. sample… http://rdtef.blogspot.com/
[Reply]