Wednesday, January 31, 2007

Adding Social Bookmarking Widgets to Blogger

'K, I've been looking for an easy way to add the social bookmarking widgets to my blogs and I think I've found it. Why is this important? If people find your blog which you've made useful and informative they may want to share it with others, so why not make it easier for them? Remember more visitors = more traffic = more AdSense clicks.

The site is here (Many thanks to Hans at BeautifulBeta!) but I'll give it the rundown here and try to clear up some parts I thought could have been a bit clearer (the purpose of this site, after all, is for you to learn from my trial and error!)

1. Go to your blog's template tab and click "edit HTML"

a. Download your template just in case you want to change it back or have problems. I didn't, but it's still a good idea.

b. Check "expand widgets" box.

2. Scroll down and find your .post img { } settings. It'll look something like this:

.post img {
padding:4px;
border:1px solid #cde;
}


You'll want to replace the border settings (between the colon and semicolon) to "0" or you'll have a border around each icon. Unfortunately, this also removes the borders from all your images in your post. (At the site they mention another way using a bookmarks css, but I have no idea how to do that yet. If I figure it out I'll update this post.)

Anyhoo, the .post img should now look like this:

.post img {
padding:4px;
border:0;
}


3. Place the following js within the head (I chose to place it just before the /head tag):

<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

4. Continue to scroll down looking for:

<p class='post-footer-line post-footer-line-3'/>

(For some reason I had problems finding it when scrolling upwards from the bottom, and no problem at all when scrolling down, maybe just a perceptual quirk). Replace it with the code found here (Right click and save as .txt and open in notepad to cut and paste into your template).

That's it, you've just added social bookmarking widgets to all your posts!

Again, many cool-points to Hans at BeautifulBeta!

No comments: