Monday, 6 January 2014

Blogging Help: Creating an Image map header

The society we live in is incredibly fast too judge. The old saying 'Don't judge a book by its cover" is forever floating around, but whether we do this all of the time or not is a different matter. The same applies with new blogs.

Lets imagine two different situations: yet they both start off in the same way. After a twitter chat, you settle down on the sofa with a mug of tea and biscuits to have a read of all of the links you were sent after tweeting, "Its almost the end of the chat! Links Please! #bbloggers". This is where the situation splits into two parts. In situation one, you click onto a link and the blog makes you want to shut your laptop down and run 100 miles. Its a garish green, red and yellow, with bright red text that makes your eyes hurt. The format is all over the place. The design cannot be considered a design; its a jumble of too-bright colours that represent an 80s disco. You close the link and click onto another link, which happens to be beautifully designed; you sit back, think 'Ahh, this is more like it' and within seconds thoughts of the hideously designed blog is gone from your head. This is where situation two makes an appearance. You click onto this blog, take in the colours but being one not to judge a book by its cover, you sit down and have a good read. Glancing up, you see that an hour has past and you've read all 56 posts. Even more surprising? The writing was so great that the blog is now one of your favourites. 

I think its safe to say that for the majority of people (myself included), putting themselves in situation one sounds all too familiar. Its in our nature to crave aesthetically pleasing things, although this perhaps vain quality often leads us to missing out on great opportunities.

Which finally brings us onto the purpose of this post. Blog design. Over the past few months I've come to terms with blog designing (after many one-sided shouting matches with my computer, a few tears and lots of stressful hours) and I would love to share some of my hard-earned knowledge with you. Lets just hope this saves you the agonising hours of scrolling through out of date to useless tutorials that I spent, eh? 

Today I bring you a topic deemed particularly tricky by the oblivious, but by many, an extremely easy topic once you've grasped the main concept: Image mapping.

For those of you who have never stepped into the world of HTML, CSS and graphics, do not get your knickers in a twist. (hat can be saved for later). 

If you're a complete blog design stranger, and have no idea what on earth I'm talking about, I'm talking about the header. Blogger automatically creates a menu with pages; but lets face it, its not the most aesthetically pleasing thing around. If you scroll up, you will see that my header has the linked pages incorporated in. That is what I am going to be helping you achieve today!

1. First of all, you will need to create your header. Online sites such as PicMonkey are great, or if you have photoshop or GIMP these are just as good. I personally use Serif Draw Plus for my designs, as it is a graphics programme I used at school.
2. Once you have created your header (Don't forget to add the links in normal, non-hyperlinked text) you will need to create an account with an image hosting site, such as PhotoBucket.
3. Upload your image to your chosen image hosting site.

4. Somewhere around the page you will see a box with various links. Find the link that says 'Direct Link' and copy and paste it into a note page or word document.
5. This is the part where you link up the text to the pages on your blog. Go to this website:
6. Upload your image, either by pasting the direct link you just copied or by browsing for the image in your files. 
7. Click 'Start Mapping and the site then take you to this page:

8. Click 'click to continue' and you will be directed to this page. This is where the real stuff happens:

9. Right click, and select 'create rectangle'. 

10. Create a rectangle around the first title , i.e 'About'.
11. A form box will come up. You will need to change the first box to the URL that you would like that rectangle of the image to take you too.
12. In the next box, change 'rect_1' to the name of the page, or what the text says.
13. You do not need to fill in the last two boxes.
This is what the form pop up should look like:

14. Repeat steps 9-11 for the rest of the text you would like to link.
15. The boxes should be filled in red, like this:

16. Once you have finished with the linking, right click and select 'get code'.
17. On the page that comes up, delete the image source and replace it with the direct link you copied from the web hosting site earlier.

18. Click onto the next tab (HTML Code) and scroll to the bottom. You should see the HTML code. 

19. Copy this into a note page or a blank word document. You will need this in a bit.

20. Now go to your blogger account (this is where things get a little geeky)
21. Do not delete your original header.
22. Go to template and then 'Edit HTML
23. Click 'jump to widget' and then 'Header1'
You should see HTML that looks like this: 

<div id="header-wrapper">

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Lauryns Notebook (Header)" type="Header">

24. See the bits that I've highlighted red? You need to change them to the following:
'max widgets' to '2'; 'locked' to 'false' and 'showaddelement' to 'yes'
25. Once you have done this, click save arrangements.
26. Go back to your layout and delete your original header.
27. Then click, 'add a gadget'
28. Choose the option 'Add HTML/Javascript'
29. Copy and paste the entire code that you copied from the image map site.

30. Now go onto your blog and check that the links work.
31. Its common for the header to have shifted slightly left and not to be centered. If this is the case then do the following:
32. Go back onto the header HTML coding and at the top, type the HTML tag <center>
33. If this hasn't solved the issue, then go to the template page.
34. Click Customize.
35. Click 'Adjust widths'
36. Drag the slider along to the right to increase the width of your blog slightly. You should see the more you increase the the width, the further the header moves along to the right.

37. You're all done!

Now I know that was quite long winded, but the website is an absolute god-send. I have completed an image map without using the site, and it took me about two hours of hair pulling and keyboard slamming to finally figure it out! *shudders at the memory*

If your header still does not work, then please do not hesitate to contact me by email and I will go through it with you again:-) If I don't reply to your email within a few hours (bearing in mind if its between 9am and 3pm then I will be at school) then tweet me every 15 minutes or so - I'm never far from a piece of technology! 

If this little tutorial has helped you in any form or shape (no shape discrimination here) then please comment your link as I would love to see your fab new headers!

Please comment what other design tutorials that you would like to see, as I would love to help you lovely lot out in any way that I can!

post signature


  1. Can't wait to apply this on my blog! :D thanks for sharing! ^^

    1. No worries, I am so glad you found it helpful! Tweet me when its up and don't be afraid to ask for help if you get stuck or confused!xxx

  2. This is really helpfull. Thank you so much! x

  3. This is soooo helpful! :O I had absolutely NO IDEA how people do that and I thought that it was going to be something really difficult! I bookmarked this lovely post and I will use it soon! ^_^

    1. Doing it without using the website is extremely difficult as I have experienced, but this website makes things so much simpler!:) Thanks Amicia!

  4. I have wondered for so long how people go about doing that! I'm definitely going to give it a go, it's my favourite kind of layout. Thank you so much for this fantastic post, it's really informative and clear and must have taken you forever to write! xx

    1. It did take a while! Although it was mainly the print screens if I'm honest! I love the layout, I think it makes the blog seem a lot more proffessional! If you decided to give it a go and acquire any difficulties, please email or tweet me and I'll help try and solve the issue ASAP! I know how stressful it is for HTML acting like its your worst enemy and threatening to ruin your blog! haha, thank you once again Jade!xxx

  5. Thank you so much, this is really helpful! xx

    1. I'm glad! happy we sorted the little issue with your blog, it just took a bit of thinking outside of the box haha xxx

  6. I haven't created a header yet so this was really helpful!
    Much Love

    1. A header is a great way to make your blog look more aesthetically pleasing and thus draws readers in! I hope it helps!:) lauryn x

  7. You are the best! Thank you so so so much! It worked perfectly and it was so easy!

    1. YAY! I'm so happy it worked!! love the look of it!:-)xxx

  8. This is great! When I have my next day off I might try it. Actually, I will try it!!!

    Corinne x

  9. Thank you so much! I have literally been waiting for a post like this for month! It worked perfectly!
    Lyds x

  10. Im an html newbie and this post is great! I cant wait to get designing!

  11. Wahou thank you for spending time to show all of us unexperienced bloggers how to do this! Very helpful and kind of you! xx

  12. Thank you SO VERY much! This was so useful <3 x

  13. Ive been wanting to do this on my blog for so so so long now!! Thank you so much it turned out great!
    Serena xo

  14. Found this super helpful, my newish blog is now on it's way to looking the way i want it to! Thank you.

    Emily x


Thanks for commenting, I'll get back to you as soon as possible!