How to customize blogger widget title Background adding CSS

Colorful header also plays a great role in attracting people’s attention towards a particular subject. Good design will draw more attention to you visitor. At the beginning of the designing I also had to suffer a lot to get the proper design. But finally I did it by myself, but forget this entire story. You are going to learn an easy trick to make your own very easily.

How to add CSS in blogger:

1. How to and where to add css.
2. Changing blogger widget title background color

Steps required to do this:

1. Login to your blogger account.
2. Now click on the view blog option.
3. Go to your blog page and look for a tool image and right click on it and “copy link address”.
4. Paste this link on a notepad and search for “widgetID”.We are going to apply css on this "wiggetID"
5. Now go to blogger template->> Edit HTML->>and Check the expand widget template and press ctrl+F from your keyboard to search for “]]</b:skin>”.[Before modifying template HTML code, backup your template]
6. Now add the following css code above the “]]</b:skin>” code.
   #ID h2{
   background:#A52A2A;
   margin:10px 0 10px 0;
   padding:8px 0 8px 10px;
   font-size:12px;
   font-family: Sans-serif, Arial, Helvetica;
   font-weight:bold;
   text-transform:uppercase;
   color:#ffffff; text-shadow:0 1px 0 #fff;
   }
   
   To modify background: replace #A52A2A with your own color code. Get color code form Here.
   To change text color : replace #ffffff with your own color code.
   You can also change font-size: here I have used 12 pixel.
7. Save the template. Finally you have done it.

Using this technique you can use multiple colors in your different widget. If you find this tutorial helpful and want to get more tutorials like that then like my facebook page and feel free to comment if you have any doubt.