Want to have a custom color Blogger nav-bar? Yes it is possible!

Just a reminder that you can change that ugly blue Blogger Navbar (if you haven't already).  I guess it's a classic kind of blue, but it clashes with almost every single one of my templates and I hate it!

Want to change yours too?

To do this, all you have to do is log into Blogger, then go to the DESIGN and then PAGE ELEMENTS tabs. This is where you alter the positioning of your widgets and things.

Click on edit in the "Navbar" area:

This is what you will see:

Now that may be all fine and dandy if you live in boring-land and like boring things but if any of you know me well then you will know that I love to be a bit different :P

Yes, I have worked out how to change the background color (kind of):

1. I recommend you backup your template before making any changes.  You can do this by going to the Design tab then Edit HTML.  You can then download a copy of your full template.
   This is just a precautionary step in case you do something weird and muck up your blog.
   
   
   
2. To have our custom colour show up, we need to make sure that we have selected the TRANSPARENT LIGHT navigation bar choice above prior to adding the below code.  If you don't do this, your custom nav bar color will not be seen!
   
   NOTE: Please note that this is basically showing your background color of choice UNDER the transparent navbar.  Therefore the color is going to be slightly muted and not the exact color that you chose.  I think this is a good compromise.
   
   
   
3. We are going to paste some code into the big box of HTML.  Now this step is going to be different depending on what template you're using, but we need to paste some code into this box and we need to find a neat place to do it.
   
   
   
   (click for a larger preview)
   
   
4. Now as you will see from the above image, I have pasted these two lines of code in a neat spot (ie: after the curly bracket '}' and before the next one.
   
   The code you need to use is:
   
    #navbar-iframe {
   background: #XXXXXX;}
   
   #XXXXXX = the HEX colour
   
   ie: #FFFFFF is white and #000000 is black. You can find a list of tonnes of HEX colours on this website or this site OR you could even use ColorZilla in Firefox to pinpoint a specific colour in your blog, grab the colour code and use that!
   
   
5. Paste the code into your blog and alter the XXXXXX to be whatever colour code you want to use. Note that you should ensure there is a ';' at the end of the colour.
   
   
   
6. Click "Preview" to see if the changes are OK and then SAVE!
   
   
7. If you do not see your newly colored nav-bar then you should check that your Nav-bar is configured to be on "Transparent Light".

IT'S PINK, BABY!

To illustrate this works, I have put a bright pink nav bar color on my Blue Love Letter template.  Click here to view the template with pink navigation bar!

If you found this useful, please leave me a comment or re-tweet this link.  I want to share it with as many people as possible because I was never sure (before now) if this could be done.