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.

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