change Blogger widgets styles - customize blogger widgets stylesheet

change Blogger widgets styles - customize blogger widgets stylesheet


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


change Blogger widgets styles - customize blogger widgets stylesheet
4/ 5 stars - "change Blogger widgets styles - customize blogger widgets stylesheet"