Best viewed using Google Chrome. Please email me if you need a fast reply as I may only reply comments here after a month. If you like my blog, remember to follow me! Thanks

Thursday, April 11, 2013

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!

8 comments:

  1. Thanks so much! I was looking EVERYWHERE how to align the gadget above my blogger header, and you solved the problem eezy-breezy. Thanks so much xYuenx.

    You're AWESOME.

    ReplyDelete
    Replies
    1. Catharina: You're welcome, very happy to know I helped! :)

      Delete
  2. It WORKED--thank you, thank you! I've tried tons of tutorials and this is the first one that really worked to center the ad in my header! Blessings, Cecilia

    ReplyDelete
  3. It worked. Thanks so much!

    ReplyDelete
  4. That was amazing. That's the simplest and smartest article I've come across about alignment issue. Thank you so much!

    ReplyDelete
  5. thank you , simple and effective!

    ReplyDelete

Do let me know what you think! :)