Ever since I posted "basic blogger css codes to improve your blogger blog" , I have received many requests for more css/html codes and tutorials, and I decided to share a tutorial that I would have absolutely loved to read when I first started blogging.
This tutorial will teach you how to replace your blog header with an image map, which is basically just an image with links on it (like my header). That way you can have a more personalized navigation bar to make your blog even more unique!
1. Create your new header image with Photoshop, Picmonkey, or any other editing program that you like. *TIP: Save your header image as a .png file to ensure sharp fonts and graphics.
2. Upload your new header to www.image-maps.com, and create links over different parts of your image.
3. Once you have finished, click "Get Your Code", and then click "HTML Code" in the tabs, and don't copy the code until step 9 (but make sure that you leave that page tab open!).
4. Now go to your Blogger Dashboard, select your blog, and go to Template → Edit HTML.
5. Hold down 'Ctrl+f' and search for these following lines in your HTML code:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>2<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
6. Change 'maxwidgets' to '2', 'showaddelement' to 'yes', and 'locked' to 'false', so that it looks like the following code:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
7. After you have done that, save your work, and head back to your blog layout.
8. Once you are there, click 'edit' next to your header, and then click 'remove'.
9. Now add a new HTML/JavaScript gadget in the space where your header used to be, and finally copy and paste your image maps code into the gadget. Once you have saved your new gadget and viewed your blog to check that it looks good and the links work correctly, you are done! Good job! :)
I will be sprinkling a few more blog code posts around my blog in the future, so be sure to let me know what kind of tutorials you would like! Anything from blog advice to css/html codes, I would love to share it with you.
And if you have any questions at all, just leave a comment and I'll get back to you!
xo Rachelle
I will be sprinkling a few more blog code posts around my blog in the future, so be sure to let me know what kind of tutorials you would like! Anything from blog advice to css/html codes, I would love to share it with you.
And if you have any questions at all, just leave a comment and I'll get back to you!
xo Rachelle
Thank you. I knew how to make the title a picture however I was still unsure about the links. Will be sure to use this technique when I get my blog ready !
ReplyDeleteAwesome tutorial!! You know those annoying blue borders. If you paste this into your CSS it fixes it.
ReplyDeletemap area {
outline:none;
}
I finally found a code that is actually useful. Thanks for the great tutorial though. The part about unlocking the original header was real helpful!! thanks xx
Oh my god. Thanks so much! I have been trying to find a way to do this for ages!
ReplyDeletexo
Mahnoor
www.mahnoorapple.blogspot.com
www.mahnoorapple.blogspot.com
Thanks so much! That was really useful! Also I was wondering if you kew how to get rd of the little pop up that says "showing posts labeled with ..." at the top of the page becuase it is really annoying xx
ReplyDeleteHi Sophie, I'm glad that you found it useful! :) That is a super easy fix, just Google it and you should find your answer very quickly.
DeleteThis is so great! Thanks :)
ReplyDeletehii,
ReplyDeletei want to do this with a widget.
Where do i have to paste the image map code to make a image in a widget clickable ?
For a widget, all you have to do is just paste the image map code into a new html/javascript widget, then save it.
DeleteSeriously Rachelle- your html tutorials are amazing- thank you! Alex
ReplyDeletetobebeautifulingodseyes.blogspot.com
Thank you, Alex! I'm so happy that you enjoy them. :)
DeleteHi! I've been looking for this tutorial for forever! But I have a question? What do you mean by step eight (how do you remove your header...?) I tried following it exactly (your directions) but they aren't cooperating with me.
ReplyDeleteHi! If you saved your work from step 7, when you do step 8, just click 'edit' on your header image on your blog layout page, and beside the buttons that say 'save' and 'cancel' and such, there should be one that says 'remove'. You should click that. What that does is remove the built in Blogger header and lets you replace it with your own coded header. It should work if you correctly carried out step 7. If it still doesn't work, check the code in step 7, and make sure that where it says 'YOUR_BLOG_NAME' you put your blog name, because that could mess things up if you don't.
DeleteHopefully it will work for you now! Thanks for asking. :)
Hi everybody! Thanks for this great tip, the image is outlined to the right and not in the centre. Anybody else same problems?
ReplyDeleteHi, I'm sorry to hear that you encountered a problem! To center the header, go to your blog's Template > Customize > Advanced > Add CSS > and paste this code into the box: ".header-outer {margin-left:90px;}"
DeleteYou can adjust the number of pixels to change the location of the header. Then press 'enter' and save. Hopefully this will work for you!
I tried using that code that you suggested right here, and my header isn't budging to the center at all... any thoughts? I've even adjusted the number a lot and nothing is helping!
DeleteHi Rachelle! I have tried this tutorial. but it's seems the site has changed. I am totally clueless. Can you help me? :)
ReplyDeleteYes, they did change it, sorry for the trouble! Follow step 1, and then upload your file to Photobucket and copy the image's code, then paste it into the box on the main page of image-maps.com. Once it finishes uploading, right click and select "make rectangle" (I think that's what it says), and make a rectangle around the font that you want to turn into a link. Then paste the link into the box where it tells you to, and continue to do the same for each of your links. Once you have finished, right click and select "get code". Go to HTML code, and copy the code, then follow the steps in this post to set it as your header.
DeleteHopefully that wasn't too confusing, just let me know if you need any more help! :)
Thank you Rachelle! Oh and thank you so much for following my blog!
DeleteThank you for the step by step! I was tearing my hair out trying to figure out why the mapping was being stripped out of my title image. Now, all fixed. Cheers to you.
ReplyDeleteIt is so great to hear that this tutorial helped you! Thank you for the wonderful feedback.
DeleteYour tutorial was amazing, and I uploaded my new header in a new blog I'm working on. However a thin, black border line is showing up on the left side and top of the header. Can you help me remove these please? Thanks so much! =) http://www.ihoardfreeprintables.com
ReplyDeleteHello Marcy! I'm so glad that it worked for you, your header looks wonderful! Yes, I've had trouble with the border line as well. I can't remember exactly how I fixed it, but I believe I put this code into my CSS box: .header-outer {margin-left:-55px;} You can adjust the number of pixels to move your header around, and if you are able to move it slightly to the left, it might fix it. If not, please let me know and I will search for a better fix! :)
DeleteThank you!
Thanks so much Rachelle! I tried it and the whole header would move over, but so would the line! So I uploaded the photo and trimmed a bit of where this line would be, and now it's gone. SO WEIRD! But thanks again for taking the time to help me so fast! I'm anxious to get this site up and going but that header was driving me crazy. YOU'RE AWESOME! =)
DeleteSo glad that you were able to fix it, sorry that the code didn't work! Thank you so much! Good luck with your site. :)
DeleteAny free sites for image mapping that you would recommend? The "image-maps" site now requires payment and it's 6.99 a month! No WAY! Thanks for your help!!
ReplyDeleteWondering the same thing over here! I am trying to find an alternative ...
DeleteHmm I'm not sure why it's showing that for you... I still use the site for free. Maybe double check the url. Sorry!
Deletehi,
ReplyDeletei found this very helpful but what size do i put the header too??
Alessandra
http://bold-bouverlard.blogspot.com.au/
This was very helpful thank you so much!
ReplyDeleteHi. Has the code changed in blogger? I can't seem to find my header in the html. Also, I don't want to pay image-maps. :P Can I just replace the image source info to my image in photobucket, and leave the rest of the code as is?
ReplyDeleteThanks in advance.
Ok me again. I figured out my first issue (turns out I am maybe a little too sleepy to be fiddling with html). I do still have a small issue with my header not aligning and the background header color is poking out from behind it. I did figure out that the person with the issue above needs to just slightly alter the code in their CSS box to ".header-inner {margin-left:-30px;}". I had the same problem. Now, I just have a thin strip of the background peeking out at the bottom edge of the image. Is there a way to just remove this background color all together in the html? Thanks.
ReplyDeleteHello! Thank you for this, I just have a small issue..
ReplyDeleteI am using a dynamic view for my blog, and I don't have - 2, which is what you said needed to be changed. Where do I go from here?
oops, it seems what i copied and pasted from above didn't paste correctly. Basically, I didn't have the code from step 5. Any idea?
DeleteStep 5 actually wasn't meant to be copied and pasted - it is meant to be searched (ctrl+f) in your HTML. Then replace it with the code in step 6. It may be good to start back at step 1 and make sure that you follow each one carefully. Thanks for asking!
DeleteGreat help!! Just need some advice- when I click on the links it leaves my blog and takes me to the image-maps site!! AHHH what have I done wrong?? :D
ReplyDeleteSo sorry that you're having trouble! Did you put links to your blog? Because if I recall correctly, if you don't put in your own links, image maps will put in theirs.
DeleteOH MY GOSH IT WORKED :D Thankyou so much for all of the help, its so kind of you! I love the way you've designed your blog :) Just wondering, how did you create the circle photo and HELLO section on the side of your blog?
DeleteYay! I'm so glad that it worked. Thank you! I made my photo circular with PicMonkey.com and highlighted the gadget titles with this code (to apply it, go to Template > Customize > Avanced > Add Css):
Deleteh2 {
background:#000000;
}
You can edit the numbers to change the color.
Yay!! Thanks :D How do i get the circular photo to show up on the side of my blog like you did? (sorry, Im new to this if you can't already tell)!
DeleteYour welcome! That's okay, I know how confusing it can be. Go to your blog layout and click "add gadget" in the sidebar. Choose "image" and upload the photo.
DeleteYay it worked! You're the best :D One more question, my header (which is an image map) is not centred, but I added the HTML code you suggested? What can i do to move it over?
ReplyDeleteTry this code in the same css box:
ReplyDelete#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}
If that doesn't work, than you may need to adjust your blog's width (Template > Customize > Adjust Widths) until it is centered.
Thankyou so, so much! I adore checking out your blog :) Take a look at mine- it would mean heaps http://gabrielleandclaire.blogspot.com.au
DeleteThanks Rachelle!! I'm changing my blog and it help a lot.
ReplyDeleteBest Regards,
Ana
http://laardillitadelpatch.blogspot.com
(changes will be available on Monday afternoon, in case you want to pay a visit)
Thank you very much...
ReplyDeleteI recovered my Blogger header from your trick...
Thanks so much for this! I'm having one little issue: I'm saving my image in illustrator with a transparent background but when I've uploaded the image using the javascript/html widget, it has a white background and no amount of tinkering has allowed me to change this! Any advice?? I'm kinda at my wits end!!
ReplyDeleteI'm so sorry to hear that you're having trouble! The only fix I can think of is making sure that you save the file as a .png rather than .jpg or any other type. Hopefully it will work for you!
DeleteThank you so much for this wonderful tutorial. It works fine for me
ReplyDeleteThis was great and works wonderfully on computer, but it doesn't show up on mobile. Any way to fix that or do I need to go back to the original header? Thanks!
ReplyDeletethank you sooooooo much! i am soooooo glad i found you and your blog! your advices are simply wonderful! have a beautiful day! :) :) :)
ReplyDeleteThank you so much for tips on moving the header!! I had been searching every where for this information!!!
ReplyDeletePicmonkey is still my go-to app though it offers limited features in the free version.
ReplyDeleteHowever, after Picmonkey I love Pixlr, alternative to picmonkey, for its mult-editing features.
Besides, its interface is simple and intuitive.
Thanks for adding this app on this list.