Custom Styles to Gadgets (Blogger)

Sometimes you just want a certain  gadget to stand out among the rest. Rather its the font or colors you wish to change or the Alignment or Position of the gadget. You can change it by following the instructions below.

1. Go to the Page Elements
2. Click the Edit option on the Gadget you wish to style and Locate The GadgetID.
3. Go to Design-->Template Designer--> Advanced-->Add CSS-->Input One Of the Codes Below.

Depending on what your trying to style you will need a different one of these codes.

Gadget:

#GadgetID {
Your styles CSS Styles
}

Gadget Headings:

#GadgetID h2 {
Your styles CSS Styles
}

Your headings might not be h2 but generally with most blog template this is the case.

Gadget Links:

#GadgetID a:link {
Your CSS Styles
}
#GadgetID a:visited {
Your CSS Styles
{
#GadgetID# a:hover {
Your CSS Styles
}

 Replace the Red text with the Unique Gadget ID.
 Replace the Blue text with the styles you wish to change.

The possibility's of the CSS styles  are endless. I will go over just a few below.

Font Color:

color: #000000;

Font Type:

font-family: YOUR FONT;

Background color:

background-color: #000000;

Background Image:

background-image:url('YOUR IMAGE');

Borders:

border-style: YOUR BORDER TYPE;
border-width: 1px;

Just change the Red text to your liking.
 

I cant go over everything but you can look through this blog for more help with these individual styles or you can look at this great site below.
W3Schools