How to Align the Position of Gadgets in Blogger

Tweet

 

Quite a few bloggers want to know how to align or position a gadget to fit a certain template or specific need. Fortunately, this is really quite eay to achieve.

1. First you need to locate the widget/gadget ID#.

2. Then go to Design --> Template Designer --> Advanced --> Add CSS --> add one of the codes below:

a) This code is for basic text alignment. Replace the blue with center, left, or right:

#GadgteID# {
text-align: center;
}

b) This code is for a more precise alignment.You can use padding & margin:

#GadgetID# {
padding: 0px 0px 0px 0px
}

c) You can also use a code like this to fit the specific needs of your blog:

#GadgetID# {
position:absolute;
left:100px;
top:150px;
}

The above code would display your gadget 100px off the left side of your browser screen and 150px off the top. You can adjust this to your liking.

There are a number of different types of positioning variables you can use.

absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the „left“, „top“, „right“, and „bottom“ properties.

fixed: Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the „left“, „top“, „right“, and „bottom“ properties.

relative: Generates a relatively positioned element, positioned relative to its normal position, so „left:30“ adds 30 pixels to the element's LEFT position.

static: Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations).

inherit: Specifies that the value of the position property should be inherited from the parent element.

For more on the use of this kind of code you may refer to the following link: Custom styles for gadgets

Good luck!