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.
   

Adding a second sidebar to your Blogger template

Have you been struggling to change your default two column blog template to a more flexible three column one? You can do it in 15 minutes or less with a little math and some copy/paste skills.

Before you begin making any changes, back up your current template. If you are already using Minima, you're in luck, it is the easiest Blogger template to customize. We're focusing on converting more recent Blogger templates, sometimes referred to as Blogger Beta templates.

Making room for an additional sidebar is going to require increasing the width of the Outer-wrapper and the Header-wrapper div styles. We'll use a formula since the width of your blog might not match the width of mine.
Find your ideal width using the following formula:

First find the extra padding by subtracting your main-wrapper + sidebar width from your outer-wrapper width:
extra padding = outer-wrapper width - (main-wrapper width + sidebar-wrapper width)

A template with default Minima widths would look like this when applying the formula:
extra padding = 660 - (410 + 220)
extra padding = 30

Template width formula:
outer-wrapper= main-wrapper width + (sidebar width x 2) + extra padding

The math for a default Minima blog template width formula should look like this:

outer-wrapper = 410 + (220 x 2) + 30
outer-wrapper = 860

Now we know what the overall width of the template we can apply it. everywhere we see our old template width we'll replace it with our new outer-wrapper width. ( like in the #header-wrapper style)


After we've edited the styles it is time to add a new sidebar div tag to the XML tag portion of the template. We will add the new tag directly after the closing div tag for the crosscol-wrapper div. Type
<br /></text><div id="'sidebartwo-wrapper'"><br /> <b:section class="'sidebar'id=" preferred="'yes'"><br /></b:section><br /> </div>
just below that closing crosscol-wrapper div and before the main-wrapper div. Your results should look like this:
<div id="'content-wrapper'"><br /> <div id="'crosscol-wrapper'" style=""><br /> <b:section class="'crosscol'" id="'crosscol'" showaddelement="'no'/"><br /> </b:section></div><br /><div id="'sidebartwo-wrapper'"><b:section class="'sidebar'" id="'sidebartwo'" preferred="'yes'"><br /></b:section></div><div id="'main-wrapper'"></div></div>
Save the template. Now we can add widgets to the new sidebar. Click on the Page Elements sub tab under Layouts and drag widgets over to the new sidebar. Save and view the results.

You can experiment with placing the sidebar in other locations like directly under the main-content wrapper div ending tag or below the ending div tag of the original sidebar.

Want to know more about styling the template for another sidebar? It's all in chapter 2 of my book Blogger Beefed Up, coming out this summer from Packt Publishing. Once the book is released I'll be uploading extra code and images about this and other hot Blogger topics. You'll also be able to download sample pages from the book on Packt's site and get ebook and printed book discounts for ordering early.