Customize Blogger Navbar, Change Background Color and Image

Recently, I wrote a post about hiding blogger navbar. At that time, some ideas came to my mind and I have done some experiments about changing navbar color and adding background image. Through template designer we can choose only limited no. of colors, may be 5 to 6 only. Now we can do some customization with navbar. Bloggers can choose the best matching color to the template and can use image as a background to make it looking cool, professional and part of a blog. This customization trick is very simple and easy to use, based on css code.

Changing Background Color

1-To change background color go to Html Editor and Expend Template.

2-Search the following code.

]]></b:skin>

Now paste the following css code before the searched code.

#navbar-iframe
background-color: red;
}

You can choose any color instead of red, for example “ #04C40B ”

Now preview template and save it.

Adding Background Image

Repeat 1st and 2nd step.

Now put the following css code before the searched code.

#navbar-iframe {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWArc1-9EzZO6RH3ucOBQ6NF8bJ_hIotR-1yfDufu0sFuR-mgAi0umjkRIJAweEvQZzi5TIUkIoaTYYEhdhT12Z5aDeTga_yOSyfbwgMmqu2Z36Wk78vk24K_AsuTVXrOSdvDYp-VkCkbn/h120/nbg.gif);
background-color: transparent;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-size: 30px 30px;
}

Now save the template and you have done.

Below is how navbar will looks like.

This is the image we have used:

And url of this image is:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWArc1-9EzZO6RH3ucOBQ6NF8bJ_hIotR-1yfDufu0sFuR-mgAi0umjkRIJAweEvQZzi5TIUkIoaTYYEhdhT12Z5aDeTga_yOSyfbwgMmqu2Z36Wk78vk24K_AsuTVXrOSdvDYp-VkCkbn/h120/nbg.gif

You can use any image as a back ground, just change the image url ( Marked with red color) in the css code.
I hope you will like this trick.