The Best Blogger Beta Tip

This post concerns Blogger Beta users. If you are not one, skip this and continue reading about cat-eating Danes, confessional box lovin' or even find out how long you can survive in space.

Now, about that tip. Have you ever wanted to place a widget, text, image or anything else in a specific place on your blog, without being constricted by the layout of your template? By adding a small piece of code you can control the exact placement of whatever you wish to put on your page with pixel by pixel precision.

Lets do this step by step:

1. Log in to Blogger
2. Go to Layout-Page Elements
3. Click on "Add Page Element" (It doesn't matter from where)
   
4. Choose "HTML/JavaScript
5. Paste in the code of whatever it is you wish to place in your blog (Widget, image, text, link, etc.)
6. Copy and paste the following code on top of the last one:

<div style="position:absolute; overflow:hidden; left:???px; top:???px; z-index:0">

Now you need to change the ??? in the code to numbers. The higher the number after "left:" the further away the object will be from the left side of the page and appropriately the higher the number after "top:" the further away the object will be from the top of the page. Experiment to find the perfect position for your object.

• Example:

If you have - left:100px; top:100px; that means your object will be placed 100 pixels away from the left side and 100 pixels away from the top side.

You can also change the z-index:0" to z-index:1", z-index:2" etc. The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Now just click "save" and view your blog for the result.

If you have any question or problems with this tip ask way in the comments, I would be glad to be of assistance. If you wish to post this tip on your page feel free to do so, just give me credit and link back to my blog. Thanks! :-)