Adding Google Gadgets to your blog


The Bloggy Widgets blog has an interesting blog entry about Google Gadgets. Are you a fan of Google? It’s a really cool company. Aside from the really fantastic search engine, they also gave us ways to make blogging and earning from blogging quite easy with AdSense. The widgets they showcase are really nifty and cool. In any case you have that option to put them there. For a brief commentary on these Google Gadgets, just check out the blog entry there.

Anyhow, you might be wondering how in the world some of those Google Gadgets could fit in your blog’s sidebar. Don’t fret. It’s not that difficult. You might have to a bit of math in order to make adjustments on your layout. This is where some knowledge of CSS would definitely come in handy. Well, if you are still a bit confused about CSS, ask your friendly CSS geek or do a little bit of searching online 😉

If you know what are the particular divs that contain your sidebar and the main content of your blog (if you are using a two-column layout, that is), look for the width of these divs.

Take for example the theme based on Very Plain Text layout. You have this in the CSS:
div#container { float: left; }
div.narrowcolumn { margin: 0 -210px 0 0; }
div.narrowcolumn div#content { margin: 0 210px 0 0; }
div#sidebar { float: right; }
div#sidebar { text-align: center; }

The thing is that you have to make adjustments in the div called .narrowcolumn so you could make your wide widget fit in here. Maybe the widget is going to need roughly 230px in terms of width and yet you want to have space around it too, maybe change narrowcolumn’s width to 250.

div.narrowcolumn { margin: 0 -250px 0 0; }
div.narrowcolumn div#content { margin: 0 250px 0 0; }

It really depends on the layout that is why you have learn a bit of CSS as you blog along. You wouldn’t want your blog’s layout to break, right? Anyhow, after making the necessary changes in the layout, you could insert the code you got from the Google site.

Not difficult, eh? Maybe it’s time to check out a nice Google Gadget for you 😉 What are you waiting for? Click to go there 😀


Originally posted on October 6, 2006 @ 3:13 am