Pages

Friday, October 19, 2012

How to Add/ Change Background Color for Right (left) Side Widget Bar in Blogger (Blogspot)

You may want to know how to add a background color to Side Widget Bar. In this post I will share with you my simple fix.

There's a reason why we want a different background color for widgets. Almost all of Bloggers have at least one side widget bar, either at right side or left side of the Blog, some people even have 2 widget bars at both sides. Add a background color to the widgets will make your widgets stand out, and make the post stand out as well. At same time, make the blog clean and neat.

To make it happen, you just need to add some CSS codes in the template Advanced Settings.

Here's how

1. From your blog dashboard, click on Template->Customize->Advanced->Add CSS

2. Copy and paste following 4-line codes into the right side window in "Add CSS" screen:
.fauxcolumn-right-outer {
background-color:#F2F2F2;
margin: 0;
}


Note: 
- The 1st line starts with a dot, make sure do not miss that dot.
- In the 2nd line, #F2F2F2 is the color code for the background. You can pick any color you want. If you have no idea about the color code, you can search "HTML color" in Google.
- The 3rd line margin: 0;will remove any space between the top tab bar and the side widget bar, which will make your blog looks neat.

3. Make sure to click on"apply to blog" button  at the top-right corner of the window, then click on "« Back to Blogger" to go back to your blog dashboard.

4. Refresh your blog now, you get the background color for the widget !

It's Your Turn

How do you like to use color for widget? How to you customize the layout of your widget? Share your experience and insights in the comments box below. 




No comments

Post a Comment