Change Blogger Widgets Styles - Customize Blogger Widgets Stylesheet

jilhub   5:39 PM   blogger tricks, blogger widgets, computer  

In this post i`m gonna talk about customization or changing styles of Blogger widgets .

First thing you have to recognize and identify that widget in your template code in order to be able to add the required style .

Go to layout → choose edit for the targeted widget  →  in the navigation bar widget page link will look like this

http://www.blogger.com/rearrange?blogID=55897787887887&action=editWidget&sectionId=header&widgetType=HTML&widgetId=HTML7   

from this link gonna extract a lot of useful information that will help us in this tutorial and upcoming tutorials 

the link is divided to the following

blogID=55897787887887  → this is your blog unique id every blogger blog have only one unique id

sectionId=header  → this is the section position id of your widget you may use it if you wanna change the style of the whole section

widgetType=Null → this is the widget type 

widgetId=HTML7 √ → this is the id of your widget that we gonna use to change 

Now go to blogger template → edit HTML → check on expand widget templates box

and search for  </b:template-skin> then add your reqired style just before it for example where ( . ) represents Id

.HTML7{align:center !important;background-color:#999;color:#0000ff;text-decoration:underline}

this code will allow you to style your widget as follow :

align your widget to center

choose gray background

and blue color for text

and underline text decoration

u may use style for the whole section using section id we talked about as follow

.header {align:center !important;background-color:#999;color:#0000ff;text-decoration:underline;}

Of course you can pick what ever styles you want , note that you should use !important in case that the widget have another inline style

hope that helps good bye for next tutorial

[source]