Happy Monday! I’m just relaxing, blogging and watching Dancing with the Stars. Do you watch? I am a Melissa fan (loved her on the Bachelor) and Giles- how could you not be!?!
Anyhow… as you may have read here, I am revamping my blog. First, I put a new blog background on my blog. Now, I am here to teach ya’ll about my header.
I created my blogger header in Photoshop. It is 16 inches long by 4 inches high. I don’t plan on going into detail about how I made my header, since everyone wants something different. But, I will say that the border with my blog name inside of it is from JW Illustrations and the kid images are from Lori Boyd.
So, what is this tutorial about you ask? Image Mapping. Huh? You know those blogs that have clickable links in the header? Well, check out my new one above, it has lots of links. To do this you need an image map.
Step 1: Go to http://www.image-maps.com and click on ‘Choose File’. Choose your header image. Click ‘Start Image Mapping’
Step 2: Using the rectangle map tool, select the part of your header you want to create a link to. See the example below. Put the internet address that you want this clickable picture to go to in the “Link for this map” box.
Step 3: Keep creating selecting pics within your header. Don’t forget to select your blog name to create a home button. See below how I selected my blog logo (by enlarging the rectangle) and linking it to my blog homepage.
Step 4: You may see text links below your header. To get these to go away, un-check the ‘Show Text Links’ box on the right hand side.
Step 5: Once your done, click “Get Your Code” button.
***Before you copy the HTML code, go to this tutorial to be able to add an additional header and delete the Blogger standard header. You only need to follow Part 1 ***
Step 6: Take the HTML code and copy it.
Step 7: Open Blogger Dashboard>Layout
Step 8: You should be able to add a Gadget in the header section. Add HTML/Javascript. Paste the HTML code from the Image Mapping site here.
Step 9: Take a look at your blog! Check all the image links, sit back and admire your work!
NOTE: If you don’t follow the tutorial above, you may end up with 2 headers. EEK!!
Congrats- you now have an image-mapped header!!
Hiç yorum yok:
Yorum Gönder