Custom Styles for Gadgets in Blogger

Tweet

 

Sometimes you just want or need a certain gadget to stand out from the rest. You can achieve this by changing its font or colors, but also by changing its alignment or position. To make the necessary changes, just follow the instructions below.

1. Sign in, then go to Design --> Page Elements.

2. Click the Edit option on the gadget you wish to style and locate the ID of said gadget.

3. Now go to Design --> Template Designer --> Advanced --> Add CSS --> then add one of the codes below.

Depending on the changes you want to make you will need a different on of these codes:

Gadget:

#GadgetID {
Your styles CSS Styles
}

Gadget Headings:

#GadgetID h2 {
Your styles CSS Styles
}

Your headings might not be h2, but 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 possibilities of CSS styles  are endless. I will go over just a couple of them 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 text in red to your liking.

I cannot go over everything in detail but you can look through this blog for more help with individual styles or you can check out at the great site W3Schools which offers a very good CSS tutorial.

Good luck!