Saturday, April 27, 2013

How to remove gradient from the blogger blog's tab bar?

         After a short break,i was redesigning one of my blog which was hosted on blogspot.com.So when i selected a particular template i found out that some how the tab bar color is now having a white gradient across it. And i tried every options in the customize template section to remove it.None of them worked.
           Then i started google searching i found many pages which contained my keywords in google's different discuss forums.But when i click on those search results it goes to the home page of that forum.Its like google never knew what i was searching for.And none of the search forum's search bars works properly.Lets accept it,the search giant want to increase the traffic rate only to it's forum's home pages(for some unknown reason!!) and redirects you to it when you click on the search result link thinking you found the solution for your problem.

           After 20 minutes trusting in google's search ability i couldn't find any solution.So i randomly clicked through pages from number 15 and found the solution.Sorry for the long introduction.Let's get into the business.

   I know many of you are searching for the problem and are not able to find the solution.So here it is in the simplest(is there a word like that??!!) way ..I have added some screenshots so it can be more easier for you to understand.

Below is a sample how my tab bar looked like with the gradient.

Now lets see how to solve this problem.First go to your blogger dash board and click on the 'template' button.Then click on Customize button.(Check the picture below)

You will reach the customization page.Click on the 'Advanced' section then scroll down next column and select the last option 'Add CSS'.On the right side you will find a blank white box(Check the picture below)

Click on the pic to see it in large size

Then type the below script there. 

<style type="text/css">
body {}
.tabs-inner .widget ul {background:#000000;}

         Now '#000000' is the html color code of black.I wanted black so i typed this.Now you might ask what if you need a different color? Wel,then you have to replace '#000000' with the color code of your choice.Now how can you find out the color code of your choice of color?.

      Well there is a place where you can find html color codes.Click on that link and you will land on a page wchich contains a huge list.Or else if you have software like adobe photoshop,open it then click on the color selection .You will get a window just like the below picture.

        If you notice you can see that the selected color is black and you can see the color code is shown at the bottom(Rounded in red).Select whatever color you want,note the color code replace #000000 with that code click apply to blog on top right .Then you are done.

Here is my fully black tab bar after i edited.

Please let me know if this post solved your problem.


  1. Woo!!! your code which you posted is very helpful me. Thank you so much.

  2. Thank you! This was very helpful. I am very, very new to blogger. I used your code and it changed the gradient, but it only changed the gradient in the center not on the sides. If you knew how to fix this you would be a champ! thanks :)

  3. Thank you, thank you! I have been searching a few weeks without any results then I found your website.