Customize your Blogger Header

I was surfing sites over the long weekend and saw someones company "blog" on their site. When I clicked the link I was sent to a "google blogger" page that matched their site perfectly. It made their "free" blog more impressive and professional.

Make your blogger header into a streamlined nav bar.

It wasn't as difficult as I thought and if you have an image editing program and a html editor it's just a few short easy steps to looking more professional.

Step 1

a) Create your navigation image in a program like fireworks or photoshop. Here is an example of what I mean:

b) Upload it to your server (or a free space) and copy down the URL

Step 2

a) Open your html editor (I used visual page -most html editor programs will have mapping tools)

b) Start a "new project" and insert your new image. Once it is opened if you right click (or go to image tools) you'll see a "local mapping tool".

c) Using the mapping tool highlight the area you wish to be a link and link it to the www page you want it to direct to.

d) Once completed view the page source- You'll notice it mapped the coordinates for you (I wouldn't know how it would be done manually) copy the image html into your note pad.

Step 3.

a) Go to your blogger layout to "customize" edit the header first. Take out any image already there, the title and description can be left if you want it shown.

b) "Add an element" just below the original header. The element you want to add is HTML/Javascript

c) Paste your image map code in the element box, save and....your done!

Visit our blog to see the mapped image nav bar in action http://view-it-here.blogspot.com/ - mouse over the tabs and the social network images.