Something Swanky

2 Different Ways to Make a Custom Header and Navbar for Your Blog

I feel like I’ve been doing a little bit of hopping all over the place with these picmonkey/blog design tutorials. Going from blog post dividers to social media icons to image URLs— I’ve been all over the place. There’s been no method to the madness!
So from here on out, I’m going to try and make my posting a little more methodical, a little more A-Z. 
With blog design, I think it’s best to start at the top. So let’s rewind past some of the other stuff we’ve covered and talk about the top of your blog– the most important part of your blog design: 
the header and navbar.
While good content and photos will ultimately keep people coming back to your blog, it’s oftentimes your header that grabs people in (or turns them away) in that split second that they click over from a link party, pinterest, etc… Which means: the top of your blog needs to look GOOD.
I’m going to cover two different methods for creating a custom Header and Navbar for your blog:
A) Header and Navbar are Separate Images
  • Easier to change out frequently
  • Less HTML coding
  • Less blog width adjustment

 1. Create the image for your header using picmonkey. Use this tutorial for more details on creating an image “from scratch” in picmonkey. 

  • size your image to be about 1100×300 pixels

(don’t forget that you can use YOUR OWN overlays to insert your photos into the header image)

2. Save the image to your desktop as a .PNG file
3. Upload the image to your header gadget on your design (old blogger) or layout (new blogger) page.

4. Make sure to click on “Instead of Title and Description” and “Shrink to Fit.”

Done with the header! Now, if you want a custom Navbar…

5. Go back to step one and now create the image you want to use for your navbar. The width of your image needs to be about 20 pixels less than the width of your blog, and the height should generally be no larger than 50 pixels. It might look something like this…

6. Add the links to your navbar in Image-Maps. See the tutorial for using Image-Maps here. (you will need the URL to your image for this step. If you don’t know how to get an image URL, see this tutorial).

7. Copy the code from Image-Maps and paste it into an HTML/Javascript gadget box on your design/layout page. Add a 

tag to the beginning of the code and a
tag to the end of the code. Save.

8. Drag the box to just beneath your header. Save the arrangement.

All done!

B) Header, Navbar, and (optional) Social Media Icons are One Image


  • You can achieve a more professional look
  • Gives you greater flexibility in the layout of your blog
  • Allows you to put the most important links up top where they are most visible

 This is how I like to do headers and navbars– so you can look to mine for an example of how it looks completed.

1. Just like the first method, you start with creating an image “from scratch” in Picmonkey. However, the image size will be a little different, and you can include images for social media icons and the navbar in addition to the title of your blog.

  • size the image to be 50-100 pixels less than the width of your blog by 300 pixels. For example, my blog width is 1200px, so the size of my image might be 1100x300 px.

2. Save the image to your desktop as a .PNG file.

While you’re in Picmonkey, create a blank white image sized to 20 pixels by 20 pixels. Save it to your desktop and name it: header eraser. We’ll use this in a few steps.

3. Upload the image into Image-Maps as an image URL, map the image with the appropriate links, and grab the code.

4. Keep that code somewhere you can grab it in a few minutes. For now, head to your design/layout page on blogger.

For this method of installing a header, we need to get rid of the header gadget on the design/layout page. There is a way to actually remove the header in your HTML code, but there’s a simpler (non-HTML coding) way to make it just LOOK like you’ve removed the header gadget...

5. Upload that tiny 20x20px white image from a few steps back into the Header Gadget. Make sure to check the “Instead of Title and Description” box. Now we’ve “deleted” the header gadget without really having to delete it!

6. Add an HTML/Javascript gadget to the design/layout page. Copy the Image-Maps code into it, and remember to add

tag to the beginning of the code and a
tag to the end of the code.

7. Drag the gadget to the top of the page (doesn’t really matter if it’s above or below the real header– it’s such a tiny gap), and save arrangement.

Voila! Totally custom and cute Header and Navbar!!

Please visit my Party Page for a more complete index of Link Parties.
Follw me!


Ashton is the owner and author ofSomething Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador.Her focus is in food styling, food photography and recipe development.
Follw me!

Latest posts by Ashton (see all)


106 Responses to “2 Different Ways to Make a Custom Header and Navbar for Your Blog”

  1. Nicola posted on June 5, 2012 at 4:27 am (#)

    Great tutorial! I’m going to try making my own nav bar right now. Thanks! :)

  2. Dorothy @ Crazy for Crust posted on June 5, 2012 at 9:54 am (#)

    Thanks for another great one Ashton! Now, if only PicMonkey would bring back my beloved Pupcat font, I’d be golden… :)

  3. {northern cottage} posted on June 5, 2012 at 11:17 am (#)

    i’m totally gonna check out the custom nav bar piece! thanks for the tips! xo

  4. sally @ sallys baking addiction posted on June 5, 2012 at 3:04 pm (#)

    LOVE the tips, Ashton. Thank you so much. I just started using PicMonkey and couldn’t be more obsessed! :)

  5. Aimee posted on June 5, 2012 at 8:59 pm (#)

    You make it seem so easy in your tutorial. If only I had the guts to do it myself :)

  6. The Hell on Heels Housewife posted on June 7, 2012 at 8:58 pm (#)

    this is amazing! can’t wait to try it out!!


  7. beverly lee posted on June 8, 2012 at 7:18 am (#)

    Thank you so much, I will be giving this a try!

  8. Cheryl @ That's What Che Said posted on June 8, 2012 at 9:38 pm (#)

    So now not only do I go to you for delicious treats…I now will come for blog design! You rock! :) I hope we meet in person one day!!

  9. Mrs. O posted on June 9, 2012 at 3:54 am (#)

    Thank you for this! I made a header in no time. I had never used PicMonkey before, this was so helpful. :)

  10. With A Blast posted on June 10, 2012 at 5:29 am (#)

    Thanks for another great tutorial!

  11. Jeanette posted on June 10, 2012 at 1:31 pm (#)

    I am in love with PicMonkey! Thanks for the great tutorial!

  12. Jelli posted on June 10, 2012 at 8:59 pm (#)

    This is the tutorial of my addicted to changing my blog design dreams. For ages I’ve been using separate photos for each of my nav bar components and pasting them together into an html widget. Why did someone ever make a tutorial teaching me to do it this (super long) way when it’s as easy as you show us here?!?! Thanks so much for your help. Can’t wait to redesign yet again!!!!

  13. Jelli posted on June 11, 2012 at 12:02 am (#)

    LOVE< LOVE< LOVE>!!!! Just did this. Can’t tell you how smitten I am with this tutorial.

  14. Patti posted on June 12, 2012 at 8:11 am (#)

    I just pinned this so I can come back later and “play” with this – thx!

  15. Ginger posted on June 12, 2012 at 8:11 pm (#)

    Featuring YOU tonight! Thank you for linking up to {wow me} wednesday! Hope to see you again tonight! :)

    Ginger @

  16. Liz posted on June 13, 2012 at 10:19 am (#)

    Thank you!!! This is amazing (and I <3 Picmonkey!)
    New follower frmo GSC! Hope you follow me back!


  17. Liz posted on June 13, 2012 at 11:55 am (#)

    Oh! And I’m putting together a post of all the tutorials I’ve used to make my blog pretty – hope you don’t mind if I share this!!! :)

  18. sugarswings posted on June 13, 2012 at 2:36 pm (#)

    wow you just saved me a ton of research and/or money! thank you so much, you are amazeballs.

  19. April posted on June 20, 2012 at 6:26 pm (#)

    So cool! Does this work on wordpress too???

    • Something Swanky posted on June 20, 2012 at 11:35 pm (#)

      I’m not totally sure, but I do have a friend who figured out how to make these tutorials work for her in WP. If you’ll email me I can get you in touch with her! Since you’re a no-reply commenter, I don’t have a way to get in touch with you!

    • Nancy P.@theittersideofsweet posted on April 6, 2013 at 5:21 pm (#)

      I would like to get the information about using this with WordPress as well, if possible? I also saw Crystal’s comments below as well and that may help too.

    • Ngina Otiende posted on June 7, 2013 at 2:32 pm (#)

      Would love to know how it works on word-press too! Thanks so much

    • Ann posted on August 17, 2013 at 8:16 am (#)

      I would like to know how to do this on wordpress too. I have both a blogger blogspot blog and wordpress, so if you could show both or explain both, that would be great!!!! Thanks!

    • Jamie posted on August 10, 2013 at 10:27 pm (#)

      I would love to see how to do this on WP too! Thank you!

    • Maureen | TatterScoops posted on August 27, 2012 at 9:07 am (#)

      Hi can you let me know how to use this on too I’m so loving this and hoping it would work but my header on wordpress is coded with CSS so if there’s a way to make it work it would be so awesome. Thank you.

    • Lacy posted on January 7, 2014 at 6:15 pm (#)

      Would love to know how to do this with WordPress! :)

  20. Valerie@Occasionally Crafty posted on June 28, 2012 at 11:16 am (#)

    I just used your tutorial to update my navbar. Thanks so much for the help- and Image Maps was a great resource! I always wondered how to do that….


  21. jtambo posted on June 29, 2012 at 12:42 am (#)

    Okay, I have a question – made my header with no problem, now trying to do the navbar. . . .what images do I save in picasa or photo bucket?? I am so confused!! can you help please;)

    • Something Swanky posted on July 2, 2012 at 4:30 pm (#)

      The image is just the words you want your nav bar to say– for example, if you look at the top of my blog, my nva bar “image” would just be a skinny, long white strip with the words “home about recipes etc…”. I would upload that image to my practice blog (or photobucket or what ever) and use that URL to link up my pages to the right words (my about page to the word “about,” etc).

      Does that help any??

      Thanks for stopping by!

    • jtambo posted on July 20, 2012 at 6:54 pm (#)

      I am just now getting back to this reply you sent:) So do I do each “page” topic on my nab bar separately? I right now have them in one long bar like you did and the URL is for the whole bar not each individual word. . . .

  22. Recipes We Love posted on July 5, 2012 at 10:10 pm (#)

    Great tutorial! thank you!

  23. Becky {This Is Happiness} posted on July 6, 2012 at 8:25 am (#)

    So excited to try this! I’ve been looking at getting someone to design my blog, but maybe I’ll try this first! Thanks for sharing!

  24. Rise&Shine posted on July 12, 2012 at 4:56 pm (#)

    Yay! Thank you for helping me with my new header!!

  25. Sarah @ Becoming Martha posted on July 16, 2012 at 3:24 pm (#)

    I just found you over at Somewhat Simple – I love your tutorials! Thank you so much! :) I have a question that maybe you could help me with… my header isn’t centering. I used the center tags, but no luck. Any idea? My site is if you want to see what I mean. I followed your tutorial above with the header/nav bar in one, and used a small white space for the “real” header and a html gadget for the image I made. Thanks again! :)

  26. Amber Reeves posted on July 20, 2012 at 9:37 pm (#)

    Hey! Lydia over at StyleIsStyle sent me to learn some things about blog design. What a help! Thanks for introducing me to picmonkey and image mapping…all these fun new things to do! I look forward to following your blog and maybe even trying some of these delicious recipes!


  27. Ashley posted on July 24, 2012 at 6:10 pm (#)

    i just used this tutorial & a few other of yours to update my page. Definitely going to write a post linking to this page & the other tutorials I used to show any readers I have how I updated it & where to come to. I love how it turned out, it’s terrific. If you have time I’d love for you to check it out, I still have a few more small things to update on it but I’m so pleased.

  28. Desi posted on July 25, 2012 at 9:43 pm (#)

    Sorry this may be a silly question, but in the photos with the donuts, how did you get them all to be the same size? That’s the issue I am having… I am trying to upload my own photos in overlay to make a header with a collage of like 3 or 4 photos, but all of those photos are different sizes and therefore don’t look right when put in the collage, whereas yours as perfectly equal. Do I have to go and resize each of those photos to be the same size? Is there a good size to make them so that they don’t look distorted? Sorry if I’m way off lol! Thanks so much for this!

  29. Life with the Ellwoods posted on July 26, 2012 at 1:43 pm (#)

    THANK YOU! I love this! Check it out:

  30. Nicole posted on August 30, 2012 at 12:24 am (#)

    Thank you so much for this! If you want to check out my handiwork go to

  31. Marshiee Kai posted on September 4, 2012 at 10:14 pm (#)

    Thank you so much!! You help me a lot!
    Keep it up with the tips!
    Lovin’ ur blog! ;D

  32. Crystal posted on September 9, 2012 at 8:42 pm (#)

    You have no idea how much this has saved me from pulling my hair out! I have spent my entire Sunday trying different tutorials. This worked!!! Yay! Thank you so much! A few tips if you are using a theme in WordPress and have zero idea what you are doing AND unlike Blogger, there is no place to put the code once you get it——>>>>
    First, install a plug-in for enhanced headers and footers. (i googled for this) Then you find that plug-in under your Settings tab in the dashboard. You can paste the code there, and check the boxes for it to globally apply. Then go take out the image header you made before you had your image mapped one. (no need for the white box just don’t have another image).
    Then, you will freak out because 1) IT WORKS (good freak out) and 2) it doesn’t show up on other pages (bad freak out). So I went to each page and just clicked update for each of my four pages. Wa-la! It worked!!!

  33. Sarah Evans posted on September 11, 2012 at 4:30 pm (#)

    Hi! Great tutorial – I really enjoyed making my code. The only problem I had was that one images links kept overriding the others.

    So, if I put my header and media icons code in place on its own it works fine. If I then add in my custom tabs bar underneath the header image the links from my header image override the tabs links. So instead of having links in to my various pages it has links to my email, pinterest etc from the header.

    I wonder if there needs to be some kind of barrier code in place between the two? I had to remove my nav bar and go back to the original blogger one :(


  34. Fine House posted on September 13, 2012 at 10:44 am (#)

    This was such a wonderful tutorial, and you introduced me to a great photo editing site as well. Thank you, thank you, thank you!!

  35. The Cyclists Wife posted on September 27, 2012 at 5:13 pm (#)

    OMG. I love you! You have all the how to’s I’ve been searching for!! Thank you!

  36. jennifer posted on October 18, 2012 at 7:47 am (#)

    I can’t get my header to disappear completely. It shows the white square and says ‘header’ (I’ve reverted to my old header until I can fix this problem…)

    But the tutorial did work for me up til that point! Thanks.

  37. Lisa posted on October 27, 2012 at 9:52 am (#)

    Ashton, I can’t even tell you how much this post helped me! You are awesome. Shared it on Wine & Glue’s FB page!

    • Ashton posted on October 28, 2012 at 8:20 pm (#)

      Yay!! Awesome :)

  38. TravelWithKatharine posted on November 1, 2012 at 1:14 pm (#)

    Thanks for recommending PicMonkey! Glad I found your page.

  39. Jamie @ Love Bakes Good Cakes posted on November 12, 2012 at 1:13 pm (#)

    Thank you, Ashton! Trish from Mom on Timeout told me to check out your link when I asked her how to get my social media buttons on my header. This is SO much easier than those other tutorials I was looking at! <3

    • Ashton posted on November 13, 2012 at 12:19 am (#)

      So glad it worked for you!! It’s my favorite blogger trick of the trade :)

  40. Loretta | A Finn In The Kitchen posted on November 20, 2012 at 11:10 am (#)

    Ha ha! I was up until 1 last night playing around with my blog. I really didn’t know what to do, so I just stripped it bare bones and would love to build it back up using these tutorials! I’m so glad I found them…

  41. Jen posted on December 1, 2012 at 4:15 pm (#)

    Thanks for the tutorial! Just did this and it took no time at all – I had no idea it was so easy :)
    I will definitely be checking out the rest of your tutorials and recipes!

  42. Andrea posted on January 6, 2013 at 11:38 pm (#)

    I am soooo glad I found this tutorial. Just having a bit of trouble with the resizing. I am not able to resize to the dimensions you suggested. 1100 x 300. Any suggestions? Thanks for a great tutorial.

    • Ashton posted on January 9, 2013 at 12:00 pm (#)

      What is the width of your blog?

    • Andrea posted on January 12, 2013 at 9:02 pm (#)

      Well, I had an epiphany right after I hit post comment. I just resized the pic I used before I merged my white rectangle to it. Thanks so much. I’ll be back for more!!!

  43. Kelly Reber posted on January 23, 2013 at 12:20 am (#)

    All worked… Yay!!! My only problem is when I whiteout the old header (that works fine)… Then I went to add an HTML gadget and tried to drag it up in to the header area and it wouldn’t drag?? Cannot figure out why?

    I also get a weird space to the right of my new Nav Bar and can’t figure that one out either!

    Thanks again for these tutes!

    • Sarah | The Cyclist's Wife posted on January 24, 2013 at 4:39 pm (#)

      Hi Kelly, I was having the same problem. When in layout, just use your mouse to pick up the html box and drag it below the “header” box. Then it will be in the right place.

    • Kelly Reber posted on January 24, 2013 at 9:57 pm (#)

      Worked this time! Awesome… thanks!!

  44. Whitney posted on January 27, 2013 at 2:51 am (#)

    THANK YOU so much for this tutorial! I, like the others, have looked high and low for something that would break down creating headers and nav bars! This was so simple to follow and I was able to create a whole new look in no time at all! Thanks again!

  45. Junaid Raza posted on January 27, 2013 at 10:43 am (#)

    Great Article. But still i have a question in my mind. May i create a navigation bar with html so that so that i could change it at any time easily. And design it with ease.??

    • Ashton posted on February 13, 2013 at 11:45 am (#)

      Yes, you can definitely create the nav bar separate from the header!

  46. Tonia posted on February 9, 2013 at 11:15 pm (#)

    love the tutorial! I just need help centering it. Is there a code I missed somewhere? Thanks

    • Bianca posted on February 25, 2013 at 10:37 pm (#)

      Same! did you ever figure it out? I’m so frustrated:P

    • Ashton posted on February 25, 2013 at 11:53 pm (#)

      Either add center tags (looks like this

      ), or adjust the width of your blog a little. Sometimes it just needs to be opened up a couple hundred pixels.

  47. Paige Roberts posted on February 14, 2013 at 3:43 pm (#)

    This is for Blogger but will it work for WordPress?

    • Ashton posted on February 15, 2013 at 2:18 am (#)

      Yes! That’s how I did mine :) Use Hooks

  48. Sarah- the magical slow cooker posted on March 1, 2013 at 12:13 am (#)

    I wanted to thank you, I just redid my header. My website looks so much better! I still have a little tweaking to do to center it, but I am in love with my new header. I love your website, thanks again.

    • Ashton posted on March 2, 2013 at 10:38 pm (#)

      Looks great!!

  49. Karissa K. @ Sweet As A Cookie posted on March 4, 2013 at 9:35 pm (#)

    I just used your tutorials and now my page looks awesome!
    Thank you so much!

  50. Jenna posted on March 9, 2013 at 1:40 am (#)

    Thank you for all of these tutorials. I was clueless using picmonkey and now the possibilities seem endless!

  51. Domonique posted on March 21, 2013 at 3:35 pm (#)

    I am so glad I stumbled upon your site!! Thank you for all the tips and tutorials! Your blog is definitely going on my blog roll when I get it together :)

  52. steph posted on March 25, 2013 at 8:57 am (#)

    I have a question I cannot for the LIFE of me figure out. I cannot pin your recipes and I think it has to do with your drop down Nav bar. There is one other site I know that has this and I cannot pin their recipes either. IT KILLS ME because I love your posts!!! Do you (or does anyone) know if it is something my Malware or Firewalls are blocking?

    • Ashton posted on March 26, 2013 at 9:44 am (#)

      Hmm… I don’t know the answer to this! Can you pin using the pin it button at the bottom of the post (instead of the button in your toolbar)?

  53. holly posted on April 5, 2013 at 2:10 pm (#)

    WOW this is perfect! thank you so much!!!!

  54. Megan posted on April 5, 2013 at 3:19 pm (#)

    FYI–it wouldn’t just let me drag the HTML/Java code to the top. I had to find this website, to teach me how to allow it to go up there:

    Otherwise, this tutorial was PERFECT!

  55. Nancy P.@thebittersideofsweet posted on April 11, 2013 at 3:03 pm (#)

    Made the header, added the social media icons, got the code, realize I don’t know how to get it into wordpress! Yikes!

    • Nancy P.@thebittersideofsweet posted on April 11, 2013 at 11:13 pm (#)

      I just wanted to say thanks for this tutorial. I have completed it final and it is up and running!! YEAH!

  56. Abby posted on April 17, 2013 at 7:27 pm (#)

    Yay! It worked! I love Picmonkey, but until today, I was not familiar with Image Maps. So easy and seamless. Thank you!

  57. Desi posted on May 9, 2013 at 11:36 pm (#)

    Hi Ashton, I am having a bit of trouble. I uploaded the 20×20 white image to my header, then added the image map html code to the html widget right above my header. But the header and links from image map aren’t showing up. Do you have any ideas what I’ve done wrong?

  58. Bianca posted on July 16, 2013 at 11:21 pm (#)

    What do you tag to the beginning and end of the code for the navigation bar? I don’t see anything and I’m pretty sure this is why my navigation bar is not centering.

  59. Lauren posted on July 17, 2013 at 7:54 pm (#)

    I loved this tutorial! I had a question though…When I went to paste my image map code into blogger…I get this weird grey box thing happening behind my new navbar! I’m wondering if it’s because I didn’t add a tag at the beginning and end of the code (I don’t really know which tag you mean…it doesn’t say on your tutorial). Could you help me out?!

    this is my site


  60. Katie Shannon posted on August 18, 2013 at 9:18 pm (#)

    First I want to thank you for your blog, this is the first blog that I’ve come across that has actually been helpful with being able to design my own blog, I love it!! I’m wondering if you’ve done a post on how to make blog buttons, I’ve checked a couple and the coding always ends up weird.

  61. Amanda posted on August 23, 2013 at 3:27 pm (#)

    THIS IS AMAZING! Thank you so much! I just did this, and it worked perfectly. So much fun!

  62. Danielle posted on September 30, 2013 at 2:26 pm (#)

    This post is so helpful! I was able to change out my header with ease. Question, though….

    I added my header and navbar as one image (I think it looks better). So, my “real header” is the white box, which is fine. Except on mobile. My mobile settings are optimized for easier load times, but my site just has that blank box and no navigation menus. Is there a way to customize just mobile to show the blog header and drop down menu? Anywhere you can direct me? Thanks!

  63. Marissa posted on October 2, 2013 at 3:36 pm (#)

    This tutorial was invaluable to some like me that is just starting their blog. Thank you so very much. I have given you full credit on my blog, Thanks again.


  64. the beth posted on October 15, 2013 at 4:46 am (#)

    Help!! I SO love that I came across this through a web of various pages and sites and users, nonetheless. This is exactly what I have been needing (I’ve been wanting to open up my blog, but wanted to jazz it up a bit before trying to attract anyone to it) but too lazy and busy to take the time to search for. But since I’ve come across it now, I’m gittin-er-done! Back to my “help!!” plea… the extra tags you mention in step 6 are not showing up for me. I think they’ve got lost in the whole coding of the page. While following along, I also noticed the same issue over on the How To Create Your Own Social Media Icons Using Picmonkey post (step 13). Could you please add those tags with spaces added, maybe, or shown in an image? THANK YOU so, so, SO much!!

    • Erin posted on August 10, 2014 at 12:14 am (#)

      THANK YOU! I did have some problems with the tag before the html, but after some Googling, it looks like the tag should read . This fixed my centering problem!

  65. Robin Rand posted on November 25, 2013 at 3:35 pm (#)

    Followed your instructions to a T. Created & mapped the header image & nav bar I want on my site. Don’t understand how to implement it on my site. Can you help? Creating the image was fun. I love learning new things. Now I’m stumped.

  66. Amelia posted on January 21, 2014 at 11:06 am (#)

    Awesome tutorial! Can’t wait to try this out later for a new header/nav bar/social media combo. Going to look at your other posts now :) Thanks a bunch!

  67. Growing East posted on January 23, 2014 at 2:26 am (#)

    I just starting blogging a couple of months ago and I have been stressing out about making a navbar for the longest time and your tutorial was a lot of help. Finally got my navbar up and running and I even decided to give you a little shout out in a blog post I did about it because I was so proud of myself! Thanks again so much.

  68. Nicole posted on February 4, 2014 at 9:21 pm (#)

    Thank you for the turorial! You just made my header so much better and I appreciate it! I have no idea what I am doing when it comes to customizing. PicMonkey will be my new best friend!

  69. Eldie @ Edlie's Domesticated Life posted on April 1, 2014 at 3:01 pm (#)

    This was so helpful! I was so confused, but this article definitely helped!

    Have a great day!

  70. Sandra Harriette posted on April 11, 2014 at 6:12 am (#)

    Oh so very helpful! Your tutorials for image mapping were broken links by the way. People can go to image-maps [dot] com and it’s pretty self-explanatory about how the linking works.

    This was so easy it’s almost a crime :D

  71. Nikki posted on June 7, 2014 at 12:13 pm (#)

    Hi Ashton! I’m using your tutorials to set up my blog. They are a God-send! Thank you! I wondered if you could tell me where I can create/find cute little pictures like your garland and mixer that you have in your header? Thanks so much for these tutorials!!!!

  72. Susan @ 2 cats & chloe posted on August 9, 2014 at 8:02 pm (#)

    Thank you so much for this! I have recently found your blog and have used many of your tips and tutorials. Question for you with this one – I have it all set up on my blog and it looks great. But now, when I look at the blog from a mobile device, there is no header at all… any suggestions about this? Did I do something wrong or will mobile not pick up the html code from Image-Maps?

    Thank you again for this post! It’s terrific! I love the look it has given me! I appreciate any help you can give about the mobile header! THANKS! :)

    • Ashton posted on August 11, 2014 at 10:10 am (#)

      It sounds like something isn’t right (although, I’m so sorry– I don’t have the foggiest idea), because Image Maps HTML should still display on your mobile….

  73. MARILY SMITH posted on September 4, 2014 at 2:06 pm (#)

    Thank you for this help! Just wanted to let you know that there are broken links on your site, I was trying to click on the link to the image-maps tutorial. I am guessing this might have happened if you removed dates from your blog posts at some point. Thought I’d give you a head’s up in case you didn’t realize yet.

  74. lilian posted on November 3, 2014 at 10:55 pm (#)

    Hi Ashton! Thank you so much for the tutorials! I’m trying the nav bar right now but the link to the image maps tutotial is broken and don’t know how to do it. Could you help please?

  75. LoloVan posted on January 17, 2015 at 8:15 pm (#)

    Thank you so much for this tutorial! I’ve been wanting to create a custom header and your post made this just as easy as using a stock header.  Next up, the nav bar :)

    Thanks again!!!

  76. Hannah posted on February 16, 2015 at 1:52 pm (#)

    thank you very very much for this post, I have just used it to create my own! also added this to my favourites page so I can come back to it when I change my layout! xx

    Hannah | Heyitshannaah

  77. Hannah Ladesic posted on March 9, 2015 at 3:06 pm (#)

    Hi! I am a very new blogger and stumbled across this post and created a Picmonkey navigation bar image and an image map! Thanks for the help. I do have one question. When I created the image I made the map fit perfectly with the links I wanted to be clickable. After installing the HTML code in the navigation bar gadget, I had to move my header a bit using CSS to get it in the right spot. (The image was not centered when I entered the HTML) Because of this moving, the image map is not exactly in the right place and I don’t know how to fix it! In my navigation bar now, only the first letter of the words are clickable!

    Thanks so much for your help! 



  1. Pingback: Blog Tip Thursday: Thoughts from a Newbie Blogger: 2013 Goal Setting | Healthy Living Blogs

  2. Pingback: reading list, volume 4.

  3. Pingback: Monday Morning Blog Talk

  4. Pingback: How to Blog Round up - DIY Crafty Projects

  5. Pingback: Let’s Get Personal…with our blog design | Señora Luz