Translate This Blog
Remember To Always Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Aligning & Positioning Gadgets (Blogger)

Sometimes people wonder how to align or position a gadget to fit your certain needs. Well its really quite simple to do.

You need to Locate The Widget/GadgetID#
Now go to Design-->Template Designer-->Advanced--> Add CSS--> Input one of the codes below

This is for basic text alignment. Replace the Blue with center, left, or right
#GadgteID# {
text-align: center;
}
This is for a more precise alignment.You can use Padding & Margin
#GadgetID# {
padding: 0px 0px 0px 0px
}
You can also use a code like this to fit your needs.
#GadgetID# {
position:
absolute;
left:100px;
top:150px;
}
This 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.

Their are a few 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:20" adds 20 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 code you may refer to this link below.
Custom Styles to Gadgets

6 comments:

Grow Line said...

Wonderfully helpful post! Thanks. I added some scrolling to my blog using this method. My problem now is that my scrolls that I added are masking my left side links and my header which is supposed to lead others back to my blog home if clicked. Please tell me how to move my scrolls to the back so my links can be clicked. Thanks so much!!! Lindsey

AiresOFwar said...

I don't see anything on your blog that scrolls. I am not sure as to what you are talking about.

Monica said...

Thank you! Thank You! THANK YOU! I finally figured out how to center the text in my Labels widget... There are several other posts that explain it, but I could only understand your way! :)

MARY said...

This is my BLOG...

http://mh-mixes.blogspot.com/

Can you please tell me how to centre the text in my sidebar under...
SITES I VISIT &
CATEGORIES

I can't see where to do what you say... :-(

AiresOFwar said...

It is centered from my view.

thingsforboys said...

thank you! This is the only way I've been able to get a widget aligned to the right

Post a Comment

Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.

Web Design Blogs PageRank