Pages

Saturday, October 6, 2012

How To Set / Change Blog Header / Title Background Color for Blogger.com (Blogspot)

To make the blog header area highlighted and blog title standout, use a unique background color for your Blogspot site is a good ideal. If you take a look at my site at the top, you will notice that the header area has a background color code #fffbff. How do you like the background color idea?

But how to set or change the background color to your favorite one in Blogger.com?

Here's my fix:

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  type in .header-inner {  to search, in the template window you will see some pieces of code like in following screenshot. Note:you may not even have the "background-color:#fffbff; " line.
4. If you don not see a line of "background-color", then copy the following one-line codes:

background-color:#fffbff; 

5. Paste the one-line codes into the template above the } , as the same in above screenshot.

6. In the codes,  #fffbff is the color code for the color I'm using now, you can replace it with any other color codes you want. 

If you have no idea of the color code, go to W3school's webpage take a look, at http://www.w3schools.com/html/html_colornames.asp .

7. Remember 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 at the top !

It's Your Turn

What's your experience of changing the background color for blog header? What's your way to may the header looks nicer? Share your experience and insights in the comments box below.




1 comment

  1. I own a blogspot as well. There are click and drop tools available in google as well. but if you are efficient in html and css codings already, you might want to try the hard coding styles. you may also want to use online tools such as tutorials and online generators like: http://www.generatecss.com/css/background/ by the way, helpful article you got there. thanks!

    ReplyDelete