Centring Widgets In Blogger

Recently I had a little bit of trouble centring the AdSense widget at the bottom of this blog. After a little digging I found this article which was most helpful.

Just to add to it, here are some screenshots to help guide you through the process of centring widgets!

Firstly, open up Blogger and open up the Template settings for your blog:

1. Template > Edit HTML

It may prompt you asking if you are sure you wish to proceed, simply click proceed if it does. At this point if you are worried about making any mistakes, you can save your template using the button provided.

Once you are ready to edit your HTML template, ensure you have checked the "Expand Widget Templates" box:

2. Expand Widget Templates

Now all that is left to do is to search for your widget and add the code to "center" it. In my case I had to search for "AdSense" and then I inserted align='centre' into the div tag:

3. Add align='center'

Knowing the rough name of the widget you are attempting to center helps alot. Otherwise it is a matter of having to search all your widgets (try searching b:widget) until you find the one which looks right...

Good luck and hope this helps someone else out there!

New Layout & Template - CSS Hacks!

How do you like the new look? I've spent some time going through the various templates, different colours and finally hacking around with the HTML/CSS.

Overall I am very impressed with all the options available! The only thing I had issue was with tweaking the transparency of the white content background. In case anyone else is using the Picture Window template and would like to adjust the alpha, here is the CSS code:

.content-outer {
    background: rgba(255,255,255,0.8) none repeat scroll top left;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -goog-ms-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    margin: 30px auto;
}

Most of that is just preserving the original style but I've highlighted the key changes I made. CSS3 lets you specify colours in rbga format, giving us access to the alpha (last argument). I've also removed the original white image which was used (now none).

I'll hopefully be adding more content and widgets soon as well!