Making it Easy to Bookmark Your Blogger Post

My buddy mojo recently started adding a cute little row of buttons to his blog entries that allow readers to post links to an entry on various social bookmarking sites. He tells me that he's doing it with a Firefox bookmarklet. I'm too lazy to be bothered with all that work every time I post to my blog, so I decided to add some boilerplate to my Blogger template.

Now, being that I'm an old skool kinda guy, I never converted my template to the latest-and-greatest drag-and-drop style that blogger makes available now. I have a number of customizations that I've not yet figured out how to "objectify" so I'll probably be staying with my current template editing mode for a while. The disadvantage, of course, is that I need to figure out exactly what should go where in the template. The advantage is that if I can write it in HTML, I can add it to the template.

If you have a Blogger Powered blog and would like to add these buttons to your entries, put the following HTML code in your template after the "<$BlogItemBody$>" line:

<div style="padding:0px;margin:0px;color:#444444;">
Bookmark this post:
<a href="http://blogmarks.net/my/new.php?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://blogmarks.net/favicon.ico" border="0" alt="blogmarks" title="blogmarks" /></a>
<a href="http://bluedot.us/Authoring.aspx?u=<$BlogItemPermalinkURL$>&amp;t=<$BlogItemTitle$>"><img src="http://bluedot.us/favicon.ico" border="0" alt="bluedot" title="bluedot" /></a>
<a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://del.icio.us/favicon.ico" border="0" alt="del.icio.us" title="del.icio.us"  /></a>
<a href="http://digg.com/submit?phase=2&amp;url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://digg.com/favicon.ico" border="0" alt="digg" title="digg" /></a>
<a href="http://cgi.fark.com/cgi/fark/edit.pl?new_url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://www.fark.com/favicon.ico" border="0" alt="fark" title="fark" /></a>
<a href="http://www.furl.net/storeIt.jsp?u=<$BlogItemPermalinkURL$>&amp;t=<$BlogItemTitle$>"><img src="http://www.furl.net/i/lil_furl_butt.gif" border="0" alt="furl" title="furl" /></a>
<a href="http://ma.gnolia.com/beta/bookmarklet/add?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://ma.gnolia.com/favicon.ico" border="0" alt="ma.gnolia" title="ma.gnolia" /></a>
<a href="http://www.newsvine.com/_tools/seed&amp;save?u=<$BlogItemPermalinkURL$>&amp;headline=<$BlogItemTitle$>"><img src="http://www.newsvine.com/favicon.ico" border="0" alt="newsvine" title="newsvine" /></a>
<a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://reddit.com/favicon.ico" border="0" alt="reddit" title="reddit" /></a>
<a href="http://www.spurl.net/spurl.php?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://www.spurl.net/favicon.ico" border="0" alt="spurl" title="spurl" /></a>
<a href="http://www.stumbleupon.com/submit?url=<$BlogItemPermalinkURL$>&amp;title=<$BlogItemTitle$>"><img src="http://www.stumbleupon.com/favicon.ico" border="0" alt="stumbleupon" title="stumbleupon" /></a>
<a href="http://tailrank.com/share/?link_href=<$BlogItemPermalinkURL$>"><img src="http://tailrank.com/favicon.ico" border="0" alt="tailrank" title="tailrank" /></a>
</div><br />

Note that there was a "<br />" tag in my template after the "<$BlogItemBody$>" tag that I chose to move to the end of my alterations. I also borrowed and modified the style information used for the "byline" for this div. Alter it to taste or remove it entirely if you like. Experiment with changing the font size by adding "font-size:80%;" after the "#444444" above and changing the "80" to whatever gives you the desired result.

There are a number of other social bookmarking sites out there that could be added to this list. These are the ones I've found by doing a (very) little research. If you come up with template lines for any others, please post a comment here to keep me updated.

Technorati Tags: Blogger, Social, Bookmarks, Bookmarking, Template, HowTo