2 Different Ways to Make a Custom Header and Navbar for Your Blog posted by Something Swanky Pin Share Tweet Email 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 file3. 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. Tutorial for using image-maps here. Tutorial for creating an image URL here. 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.
Thanks for another great one Ashton! Now, if only PicMonkey would bring back my beloved Pupcat font, I’d be golden… 🙂 Reply
i’m totally gonna check out the custom nav bar piece! thanks for the tips! xo http://www.NorthernCottage.net Reply
LOVE the tips, Ashton. Thank you so much. I just started using PicMonkey and couldn’t be more obsessed! 🙂 Reply
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!! Reply
Thank you for this! I made a header in no time. I had never used PicMonkey before, this was so helpful. 🙂 Reply
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
Featuring YOU tonight! Thank you for linking up to {wow me} wednesday! Hope to see you again tonight! 🙂 Ginger @ gingersnapcrafts.com Reply
Thank you!!! This is amazing (and I <3 Picmonkey!)New follower frmo GSC! Hope you follow me back! LBhttp://www.accordingtol.com Reply
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
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! Reply
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.
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!
Hi can you let me know how to use this on WordPress.org 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. Reply
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 Reply
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
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! Reply
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
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,AmberBsAsorBust.Blogspot.com Reply
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
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
Thank you so much for this! If you want to check out my handiwork go to guiltlessmama.blogspot.com Reply
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
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 🙁 Sarahhttp://acatlikecuriosity.blogspot.co.uk/ Reply
This was such a wonderful tutorial, and you introduced me to a great photo editing site as well. Thank you, thank you, thank you!! Reply
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
Ashton, I can’t even tell you how much this post helped me! You are awesome. Shared it on Wine & Glue’s FB page! Reply
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 Reply
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… Reply
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
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
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!!!
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
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. Reply
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
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.?? Reply
Either add center tags (looks like this YOUR HTML HERE ), or adjust the width of your blog a little. Sometimes it just needs to be opened up a couple hundred pixels.
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. Reply
Thank you for all of these tutorials. I was clueless using picmonkey and now the possibilities seem endless! Reply
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
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
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)? Reply
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! Reply
Made the header, added the social media icons, got the code, realize I don’t know how to get it into wordpress! Yikes! Reply
I just wanted to say thanks for this tutorial. I have completed it final and it is up and running!! YEAH! Reply
Yay! It worked! I love Picmonkey, but until today, I was not familiar with Image Maps. So easy and seamless. Thank you! Reply
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
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
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
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
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
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
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
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
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! Reply
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 Reply
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
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
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
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
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
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
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
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 Reply
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
