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

Do to error codes you should use the old interface when attempting many of these tweaks to your template

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

9 comments:

  1. 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

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

    ReplyDelete
  3. 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! :)

    ReplyDelete
  4. 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... :-(

    ReplyDelete
  5. It is centered from my view.

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

    ReplyDelete
  7. This is my test site.
    http://russstoeckelphotographytest.blogspot.com/

    I'm trying to move my navbar (gadget) so it aligns with my logo. I tried doing what you wrote, but nothing moved even when changing the left, right, up, down numbers. Any other suggestions?

    Thanks!

    ReplyDelete
    Replies
    1. Try using this code in the add CSS box.

      #HTML1 {
      position: relative;
      left: 150px;
      }

      Adjust for more or less

      Delete

Web Design Blogs PageRank