[Shamelessly recycled from my post on the appletalker scrapbook]

Here’s a quick tutorial on how to add a nice toolbar [with icons!] to the bottom of each of your Blogger posts, that will allow your avid readership to post your drivel to the following social bookmarking sites; Digg, Reddit, del.icio.us and Technorati. I’ve also incorporated Blogger’s built-in 'Add Comment' link into the toolbar, to keep everything neat and organised.

First of all, grab yourself some icons for the social bookmarking sites you want to provide links to. If you’re feeling lazy, or you just want to use the same ones as i did, click here to download icons for Comment [generic], Digg, Reddit, del.icio.us and Technorati.

Upload the icons to somewhere on the intarwebs. If you havenae got your own server space, you’ll have to try one of those free image storage sites like Imageshack, Photobucket, Flickr.. etc.

[NOTE: You’ll actually have been given image storage space on Picasa, when you signed up for Blogger, but _Picasa makes it nigh on impossible for you to link directly to images stored thereon, without having you jump through half a dozen hoops, so [at least for this mission] you’re better off hosting your own, [or using one of the less hassle-filled alternatives]._

Now you’re ready to start hacking your template. two caveats here:

If you see a window full of code, you’re ready to go. if you see the following dialogue, click UPGRADE YOUR TEMPLATE and then reselect it in its modern guise.

[NOTE: If you’ve already hacked your existing template, you’ll lose any changes when upgrading to the modern version, so be warned!]

Phew! - still with me? - OK. Here’s the code I used to build the toolbar. Notice it’s not yer average HTML. It makes use of Blogger specific tags such as expr:href inside the links. So normal HTML code willnae work here. Note also that I’ve enclosed my social bookmark links [and Blogger’s own ‘COMMENT’ link] inside their own <div> tag, of class linktoolbar. This is so that I can style up the text and adjust the position of the icons later.

Remember to change 'http://yourdomain.com' to point to wherever you stashed your icons!

<div class=’linktoolbar’>

 <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><img alt=’comment’ src=’http://yourdomain.com/comment.png’
height=’16’ width=’16’/> comment</a>

 ||

<a expr:href=“http://digg.com/submit?phase=2&url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’digg’
src=’http://yourdomain.com/digg.png’ height=’16’ width=’16’/> digg this</a>

||

<a expr:href=‘“http://reddit.com/submit?url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’reddit’
src=’http://yourdomain.com/reddit.png’ height=’16’ width=’16’/> add to reddit</a>

||

<a expr:href=‘“http://del.icio.us/post?url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’del.icio.us’
src=’http://yourdomain.com/delicious.png’ height=’16’ width=’16’/> add to del.icio.us</a>

||

<a expr:href=‘“http://technorati.com/faves?add=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’technorati’
src=’http://yourdomain.com/technorati.png’ height=’16’ width=’16’/> add to technorati</a>

<br/><br/>

</div>

Now you need to paste this code into your template in the appropriate place.

go to LAYOUT > EDIT HTML

Make sure you’ve ticked the box which says EXPAND WIDGET TEMPLATES - otherwise you’ll only be shown the bare bones of your template’s HTML - and not all the stuff you need

Now you’ve got to hunt through all this code spaghetti [which the Blogger developers have kindly left bereft of anything so feckin’ helpful as more than a couple of lines of code commenting!] and look for the line <p><data:post.body /></p>. Again, these instructions are for the minima template. If you’re using a different template, the code may be slightly different.

Paste your toolbar code immediately after <p><data:post.body /></p> as shown below

Once you’ve pasted the code in, SAVE your template and hit the PREVIEW button at the bottom of the template editing window

You should see the new social bookmarking links toolbar at the bottom of each of your posts. if you get an 'XML parsing' error while trying to preview, you messed up pasting in the code and you’ll have to revert your template [by hitting 'CLEAR EDITS'] and try again. If your toolbar is in the wrong place, you’ve pasted the code into the wrong place in the template - or you’re using a template that’s laid out completely differently to 'minima' [which is the one I’m using here].

The toolbar’s looking good as far as it goes, but the text is a bit big and I dinnae like the borders round the icons. Luckily, since we put the toolbar in its own <div> tag we can use some CSS styling to tidy things up.

Back to your template again and this time you’re looking to stick your CSS definition in somewhere between the

<b:skin><![CDATA[/\*
and]]></b:skin></head>

tags. The location isnae as vital this time, but I like to add my custom CSS just before the end

]]></b:skin></head>

tag, so I can find it easily when the urge for further ‘tweakage’ is upon me!

Right. Here’s the CSS i used to adjust my toolbar. Use as is, or adjust to fit your own layout. The first declaration shrinks the text. The second removes the borders from the icons and moves them downwards by 10 pixels, so they line up better with the text.

.linktoolbar

{

font-size: 0.75em;

}

.linktoolbar img

{

margin-bottom: -10px;

border: 0px;

}

And here’s the finished product. Smaller text makes it a bit less clunky and the images now line up nicely with the text. as my old multimedia lecturer, Steve Marland used to say - 'Job’s a good 'un!'

Well, that’s it. Dinnae forget to save your changes and then sit back and wait for all that extra traffic to come pouring in when people start adding your posts to the social bookmarking world - and, if you found this tutorial useful, why not return the favour by clicking on a few of the links in my social networking toolbar below!