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

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

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
Benefits:
  • 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

Benefits:

  • 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.
« Previous Post

Crazy For Crust: How to Use Curves in Picmonkey

Next Post »

Dessert Crescent Rolls Recipe

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

  1. 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!!!!

    Reply
  2. 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!!! 🙂

    Reply
  3. 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;)

    Reply
    • 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!

      Reply
    • 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. . . .

      Reply
  4. 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 http://www.becomingmartha.com 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! 🙂

    Reply
  5. 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!

    xo,
    Amber
    BsAsorBust.Blogspot.com

    Reply
  6. 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.
    http://www.hillbillyprincessdiaries.blogspot.com

    Reply
  7. 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!

    Reply
  8. 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!!!

    Reply
  9. 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 🙁

    Sarah
    http://acatlikecuriosity.blogspot.co.uk/

    Reply
  10. 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.

    Reply
  11. 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!

    Reply
  12. 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.

    Reply
  13. 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!

    Reply
  14. 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!

    Reply
  15. 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 🙂

    Reply
  16. 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?

    Reply
  17. 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?

    Reply
  18. 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.

    Reply
  19. 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
    http://fromragstorichardsons.blogspot.com

    THANK YOU!!

    Reply
  20. 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.

    Reply
  21. 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!

    Reply
  22. 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.

    Marissa
    makingmarissa.blogspot.com

    Reply
  23. 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!!

    Reply
    • 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!

      Reply
  24. 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.

    Reply
  25. 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!

    Reply
  26. 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 😀

    Reply
  27. 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!!!!

    Reply
  28. 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! 🙂

    Reply
    • 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….

      Reply
  29. 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.

    Reply
  30. 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?

    Reply
  31. 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!!!

    Reply
  32. 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! 

    Hannah 
    3oakind.blogspot.com

    Reply

Leave a Comment