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
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.
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

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

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

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

    http://www.NorthernCottage.net

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

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

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

    Maggie

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

  8. 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. Thank you for this! I made a header in no time. I had never used PicMonkey before, this was so helpful. :)

  10. Thanks for another great tutorial!
    Linda

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

  12. 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. LOVE< LOVE< LOVE>!!!! Just did this. Can’t tell you how smitten I am with this tutorial.

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

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

    Ginger @ gingersnapcrafts.com

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

    LB
    http://www.accordingtol.com

  17. 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. wow you just saved me a ton of research and/or money! thank you so much, you are amazeballs.

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

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

    Valerie- http://www.occasionallycrafty.blogspot.com

  21. 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;)

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

    • 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. Great tutorial! thank you!

  23. 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. Yay! Thank you for helping me with my new header!!

  25. 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! :)

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

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

  28. 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. THANK YOU! I love this! Check it out: lifewiththeellwoods.blogspot.com

  30. Thank you so much for this! If you want to check out my handiwork go to guiltlessmama.blogspot.com

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

  32. 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. 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/

  34. 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. OMG. I love you! You have all the how to’s I’ve been searching for!! Thank you!

  36. 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.
    jennifer recently posted..Newborn Hats with ButtonsMy Profile

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

  38. Thanks for recommending PicMonkey! Glad I found your page.

  39. 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
    Jamie @ Love Bakes Good Cakes recently posted..Menu Plan MondayMy Profile

  40. 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…
    Loretta | A Finn In The Kitchen recently posted..Maple Brussels Sprouts with BaconMy Profile

  41. 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. 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.

  43. 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!
    Kelly Reber recently posted..New Year = A New MenuMy Profile

  44. 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. 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.??
    Junaid Raza recently posted..Value of Template In Blogging Seo – Simple Tempalets are BestMy Profile

  46. love the tutorial! I just need help centering it. Is there a code I missed somewhere? Thanks
    Tonia recently posted..ChangesMy Profile

  47. This is for Blogger but will it work for WordPress?
    Paige Roberts recently posted..New Theme: FurtherMy Profile

  48. 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.
    Sarah- the magical slow cooker recently posted..Slow Cooker Sour Cream Salsa ChickenMy Profile

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

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

  51. Domonique says:

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

    • 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. WOW this is perfect! thank you so much!!!!
    holly recently posted..52 Weeks of KindnessMy Profile

  54. 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: http://www.spiceupyourblog.com/2009/11/how-to-add-gadgets-above-or-below.html

    Otherwise, this tutorial was PERFECT!

  55. 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 recently posted..DIY Soccer Cupcake ToppersMy Profile

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

  57. 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. 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. 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!!
    Lauren recently posted..The Story of UsMy Profile

  60. 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.
    Katie Shannon recently posted..Turn anger into graceMy Profile

  61. THIS IS AMAZING! Thank you so much! I just did this, and it worked perfectly. So much fun!
    Amanda recently posted..Everything I Needed to Know about Life, I Learned From Joey, Chandler, Ross, Rachel, Monica, and PhoebeMy Profile

  62. 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. 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

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

    • 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. 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. 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!
    Amelia recently posted..diy Save the Date Magnet – test postMy Profile

  67. 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.

    http://www.growingeastblog.com/2014/01/how-to-design-install-header-and.html
    Growing East recently posted..How To Design + Install a Header and Navigation Bar For Your BloggerMy Profile

  68. 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. This was so helpful! I was so confused, but this article definitely helped!

    Have a great day!
    Eldie @ Edlie’s Domesticated Life recently posted..Homemade Hamburger HelperMy Profile

  70. 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. 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. 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! :)
    Susan @ 2 cats & chloe recently posted..While I’m Busy In CharlestonMy Profile

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

Trackbacks

  1. [...] DIY Custom Header: Step by step guide for making your own header using PicMonkey. [...]

  2. [...] 2 Different Ways to Make a Custom Header and Navbar for Your Blog via something swanky:  blogger friends, this is super helpful info! [...]

  3. [...] 2 Different Ways to Make a Custom Header and Navbar for your Blog [...]

  4. [...] 2 Different Ways to Make a Custom Header and Navbar for Your Blog [...]

  5. [...] my searching, stumbled upon this blog posting by Something Swanky about Creating a Custom Header using PicMonkey and followed her awesome directions to create a custom image using the PicMonkey website. The [...]

Leave a Comment

*

Current ye@r *

CommentLuv badge