6 Steps: Aligning Widgets, Headers and Stuff (Blog Tutorial)

Hey again. I've also promised this tutorial some time ago. It's one of the most important things to transform a sloppy kind of blog into a perfect, professional-looking one.

Aligning sidebar widgets. 
And header banners.
And everything else that needs proper alignment. 

It's very, very easy to do, so every self-respecting blogger out there should really learn up this trick. :)
Just a few lines of code will make all the difference to your blog. Here's a couple of photos of the BEFORE and AFTER:

BEFORE

AFTER

See the difference? We need to align the words with Ethan's picture above, so that it looks neater. Originally the words (it's one whole thing turned into a link widget) are aligned left. To make sure it is directly below the picture, we need to insert a little bit of code to correct this problem. After correcting, you can see that the words are directly below the photo. Much pleasing to the eye, especially when you have a lot of widgets.

Here's how to do it:

Step 1: Find the widget ID of the particular widget you're going to align its position. How? Go to Blogger > Layout. Then click on the "edit" button of the particular widget. My case is illustrated below.

Step 2: On top of the pop-up, the place where you have the URL of the pop-up, copy the part behind the widgetID=. It's at the very back of the URL. In my case, I'll be copying HTML21 down.

Step 3: Now go to Blogger > Template > Customise, which will open up the Template Designer.

Step 4: Okay. Now copy this code:

#HTML21 { 
position:centre; 
left:55px; 
top:0px; 
}

The part in blue is where you put in your own widget ID, the one you copied just now. :)
Position: Don't bother about this, you'll be using the last two lines to align instead of this.

Left: This will be a bit confusing. If your number is a negative one, it means to the left. If your number is a positive one, it means to the right.
Now I want my widget to move to the right, so I need a positive number. Here I've entered a number, 55.
0 means nothing changes.
If I enter -55px, then that means the widget will move more to the left.

Top: Same as above, but this deals with vertical alignment. Maybe your widget is a bit too downward. You want to shift it up a little. So, up will be positive number, while down will be negative number. Sort of like transformations in Maths, but that's another thing. Haha.
In my case I don't need to move the widget vertically, so I'll leave it as 0px.


Step 5: Now go to Advanced > Add CSS. If this is your first time using this function, you will see a blank box. Which may be a little scary, but it's not. It's easy. Just paste the code into the blank box. 

If you have something already there, paste it below the previous code. See my example below? There's a linkwithin code above. All I did was paste the new code below, make sure to have space between them.

Step 6: Now click Apply to Blog button at the top right corner, then view your blog! There should be a difference already! It might take a few tries to get the alignment right. Play with the numbers and see which number will eventually align your widget properly!

That's it! Now you have a neat and pleasant blog. ;)
Remember, neatness is very important! We don't want our readers to go cross-eyed! :)
Happy editing!