Adding unique background image to the single widget

It is possible to setup background image to the single or an individual widget. Using this tricks, you can use different background images to each widget to your needs for your blogspot/blogger blog. You can see this demo in my blog's ads above.

To achieve this takes a little work. Each widget has a unique name. In this example, I have a widget, LinkList



First, logon to blogger.com


Go to Layout>>Edit Html

Search for your widget unique ID. I have "LinkList1" as the unique ID for my LinkList.

<b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/>

So, my unique ID here is LinkList1.

Add this code between <b:skin><![CDATA[/* and </b:skin> or better keep it before </b:skin>

/* Sidebar Content */ 
#LinkList1{
background: #ffffff;
}

The above code will result the white background. You can define your own background by changing the hex colour code. And you must remember that LinkList1 is the unique CSS code for your widget.

Further if you want to add your own background image. Just make some twist as below:

#LinkList1{
background: #ffffff url(http://www.yoursite.com/image/image.jpg) no-repeat;
  }

These are all the magic because of the CSS code. You can make add other interactive effects on your widget and blog by using the proper combination of CSS codes.