Reposition Gadgets on Blogger using CSS

So, today I've decided to share a little trick for moving around gadgets on Blogger, which can be super helpful when you are working on fine tuning the design of your blog... or if you want to add something a little special (like the hearts logo with angled banner that trails off the page at the top left of my blog). I'm going to try to present this in the easiest way possible, and hopefully it will be useful to you.

First, find the gadget name:
•In the design screen right click on "edit" located to the bottom right of the gadget you would like to adjust and open in a new window.

•In the address bar there will be an address similar to this http://www.blogger.com/rearrange?blogID=3833409852568378890&widgetType=HTML&widgetId=HTML4&action=editWidget&sectionId=sidebar-right-2-2
what you are looking for is the widgetId name which I have bold.

Next you are going to go to template designer/ advanced/ Add CSS
•in the white box you will add this CSS and adjust (instructions for options are below)

#HTML4{
position:relative;
left:0px;
top:0px;
}
••#HTML4 - this will be the name of the gadget as we found in the first step (make sure you keep the #)
••position: - this option relates to where to position originates. Being that we are just doing a reposition, we are going to use "relative" because it moves the gadget in relation to where it originally is on your blog.
••the left and top options are what you use to move the gadget. You can put a positive or negative number in there to move it left to right and top to bottom. You can mess with the numbers which in the "add CSS" box and adjust values until you get it where you want it.

•If you would like to move multiple gadgets uniformly, you can add multiple IDs separated by a comma. like this:

#HTML4, #BlogArchive1, #Followers1, #HTML3{

position:relative;

left:0px;

top:0px;

}

If you have ever been troubled by the space between your posts content and your header, you can use this CSS to move your content up closer to your header buy using this code just like we just did for the gadgets.

#Blog1{

position:relative;

left:0px;

top:0px;

}

I just thought I would share this quick, I hope it is helpful. If you need blog help, contact me, and check out my blog design service.