Cool Gradient Background to Blog Sidebar

         Gradient background with rounded corners will be perfect to your Blogs side bar, If you do not believe me just take a look at the Demo. Of course you can change the gradient to any color or a style. Also the Widget Headers, See "How to customize widget headers" first.

Customize sidebar background

Before Start, Log in to your blogger account and Go to: Template » Edit HTML
the search for   "  ]]></b:skin>  "Then place the Created code just before the founded code.
Now let's see how to create the CSS code.

Please remember, I'm Going to create the CSS code step by step. So you can skip any not important step. If you do not need it.

Background color

Single color ............................................

.sidebar {
background: #FFF  no-repeat scroll 5px 10px;
}

You can change the background color by changing #FFF to any color you need. Choose a color you need from our Color code generator .

Gradient ............................................

For a better looking add a gradient to background Now it's easy to create a Advanced gradients with ColorZilla code generating tool. Create a gradient you need with he Photoshop looking interface. (Read more about ColorZilla Here).
         Then copy it to your clip board and replace it with " background: #FFF " in the code.

Margin

Now lets ad the margin code to Our Style code. after you have added a margin, your code will look like this.

.sidebar {

background: #FFF  no-repeat scroll 5px 10px;

margin:28px 0px 5px 0px;

}

" 28px " is top margin
" 0px " is right margin
" 5px " is bottom margin
" 0px "is left margin
So change them to any value you need .

Padding

Padding is a important option. without it, you widget will not be aligned correct.
the code will be looks like this.

.sidebar {

background: #FFF  no-repeat scroll 5px 10px;

margin:28px 0px 5px 0px;

padding:10px 10px 10px 10px !important;

}

Border

Here is a border with rounded edges.

.sidebar {

background: #FFF  no-repeat scroll 5px 10px;

margin:28px 0px 5px 0px;

padding:10px 10px 10px 10px !important;

border: 1px solid #d5d5d5;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}

1px is border width change it by replacing  " 1px " with the value you need.
And change the reduse of the edges by replacing " 5px " with your value.

Also, If you do not need rounded edges, Simply delete

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

from the code.

Make it more better

Only a background will make your blog ugly for sure. You Do not need so. right? So add Gradient highlight to Widget headers too..



.

Subscribe to Get Latest Posts in your Inbox