Changing the Background color of a widget

Do you have a widget on your blog you want people to notice? Want to add a little extra flair to your blog with different background colors? It is really easy to do. In this article I'll show you how to apply a background color to individual widgets using a little css.

First, you need to find the unique id of your widget. Each page element in Blogger has a unique id, usually a combination of letters and numbers like this: Profile1.
Find the widget ID
You can find the unique ID in your Blogger template.

1. Login in to Blogger, Click Layout, and selecting the Edit HTML sub tab.
   
2. Click the "Expand Widget Templates" checkbox.
   
3. Scroll down the template until you see the widget's tag. Here is the profile tag for example:
4. Now that you have the id, you are ready to style it with CSS.

Styling the widget

1. Scroll all the way back up to the styles area of the template. look for the #side-wrapper style, and position your cursor just after the closing bracket } of that style.
2. Create a new div style for your widget. Type the pound sign # then type the widget id Profile1, then an opening bracket. Click the enter key on the keyboard, then add the background-color attribute: background-color:#ccccff; It can be any color you like. Hexadecimal format is the most flexible way to declare a color. This will put a blue background color on your profile. Type a closing bracket }
   
3. You should now have a new div tag style for the specific widget. It should look like the example below:
   #sidebar-wrapper {
   margin-$endSide: 14px;
   width: 240px;
   float: $endSide;
   background-color: $mainBgColor;
   display: inline; /* fix for doubling margin in IE */
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   #Profile1{
   background-color:#3399ff;}
   /* Headings
   ----------------------------------------------- */
4. Save the changes, Clear your browser's cache, (ctrl + f5 on a PC) then view the changes. You can now change the color anytime by editing the style you just created in your template.
   

Google gadgets for Blogger in Draft

Some of you may already know this. Adding Google gadgets to Blogger blogs is officially in test. Many of the gadgets will not be useful to most bloggers, but there are so many of the things we will have plenty to choose from.

To test them out, visit http://draft.blogger.com to login to the draft/test version of your blog. When you visit the layout area under the tempalte tab, you can add a new page element and will see any new page element widgets. Choose the Google Gadgets widget, and you will be taken to a more elaborate, web page like screen where you can search, scroll, or view gadgets by category. After choosing a widget, click the preview button to see it in action.

The widget you chose may not work properly. Remember, this is only a test. Take it for a spin and be sure to let the Blogger team know what you think.