2 Different Ways to Make a Custom Header and Navbar for Your Blog
- 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).
8. Drag the box to just beneath your header. Save the arrangement.
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!
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!!