If I lost you.. just know it was a LOT of work and headache to get everything to look just right.
But when blog hopping the other day, I saw someone's header and checked out their page source (the html behind the page) to see how they did it.. and I learned something new: Image Maps.
Holy Moses, I'm excited about this!
Basically, using HTML code, you give the computer a "hot spot" using coordinates, that if clicked, will direct to another page just like a text link.
So I redid my header using an image map. Isn't it great? :)
Here's how you can do one too:
1. Create your header image.
2. Upload your header image to your blog.
- Go to Design > Page Elements, and click on the Edit link in the Header Section.
- Upload your image, and save.
- Go to Design > Edit HTML, and click the "Download Full Template" link, just in case you need to revert back. It will save a backup on your computer.
- Above the template editor, click the Expand Widget Templates box.
- Find this line of code (Edit>Find, and you can type some of it in to search):
- Add in the bolded words.
- Click Preview to make sure the template still works, then Save.
4. Create the code for your Image Map.
- Go to Image-Maps.com, and upload your picture. The website says it cannot host your photo, but don't worry about it. Your photo is already hosted - you uploaded it into the header already, and we won't be using that part of the code anyway.
- Click "Start Mapping Your Image." (Click through again when the "successful" message comes up.)
- Create rectangle or circle shapes, move and resize them so they are over the spaces you want to link, and add in the information the website asks for. The "ALT id" is just the page name - like About Me.
- Scroll down and add in your "base url" (your main blog address), uncheck the box "Show Text Links", and then click Create Code.
- Click the tab: HTML Output. What you see is what you get. Go back to change things you don't like.
- Click the tab: HTML Code. Highlight and Copy everything from to
- Basically, don't highlight/copy the first three lines of code, and the last tag . You don't need them.
- Go to Blogger>Design>Page Elements.
- Title your gadget: Image Map.
- Right click in the box, and choose Paste. You should see all the code you copied from the Image-Maps website.
- Now copy and paste this above the code you just entered:
- Click Save. And view blog.
Questions? Comments? Pin It Now!