Pages

Wednesday, October 17, 2012

How to change the background color for top tab menu bar in Blogger (blogspot)

Once you add a tab menu bar at the top of your blog by using static Pages, you will get one more tab at the top bar each time you publish a Page. Then how to set/ add / change the background color for the top tab menu bar, like on this site, give it a green background color, or any other color?

It's easy. You just need to add one line codes to your blog template.

Here's how

1. From the blog Dashboard, go to Template -> Edit HTML-> Proceed -> put a check mark in front of the the "Expand Widget Templates" option (details: same as the first 3 steps in this post)

2. On your keyboard press the "Ctrl" and "F" keys at same time to bring up the search box.

3. In the search box  you type in (or copy) this highlighted codes .tabs-inner { to search, in the template window you will see the mouse cursor come up to some code similar to following screenshot:


4.  Add following one line code above } symbol:

background-color:#6baa4a;

Note:

#6baa4a is the color code for the green color I'm using. You can replace it with any other color code you want. If you have no idea of the color code, you can search "HTML color" in Google.

Once added, it will looks like following screen:


5. Make sure to save the change by clicking on "Save Template" button at the top-right corner. Done !

Go back to your blog and refresh your webpage, you will see your favorite background color showing up for your top tab menu bar !

It's Your Turn

What's your experience of creating the menu tabs? How do you customize the tab? Is there any other menu tab solution? Share your experience and insights in the comments box below.  



1 comment

  1. Hi! Thanks for this article Very helpful I have a problem with my tabs: there is an annoying black bar on the right and I can't get rid of it and there are even more annoying separators between the tabs. What can I do about that? Here's my blog:


    http://greluchesetfanfreluches.blogspot.fr/

    Here's the CSS I added to obtain this result:

    .tabs-inner .widget li a {
    font-family:"Gruppo";
    font-size:122%;
    font-weight:bold;
    font-style:bold;
    color: black;
    border:0px;
    background: #ffffff;

    }
    I would reeeeaaaally appreciate any help!
    ^^

    ReplyDelete