Blogging Tips

Saturday, December 20 2008 13:39 Written by Joeprah

Ok, I don't have a Blogger blog, but several of my blogging friends do.  And after my last blogging tips post, which showed off some creative social bookmark icon sets, I received a question asking how these icons could be added to their Blogger blog.  After a lot of research and a lot of trouble shooting on my test Blogger blog I came up with a solution.  This post attempts to take all the pain out of the process of hacking the code of your template so it will allow you to add the icons without issue. 

Step 1:

Host the images you want associated with your social bookmark sites at a free image hosting site.  In other words go to one of these sites (or ones like them):

Photobucket
ImageShack

upload each image you plan on using and get the "url" tags associated with each image.  The direct link will be needed later on in the process so keep them together in a word doc or in notepad or something like that.  The direct link should look something like this: 

http://i393.photobucket.com/albums/pp11/Joeprah/digg.png

Step 2:  Getting Ready to Edit your blogs HTML

Always Back-up your Blog's template before you do any work on it.
Go to your Blogger blog and edit the template.  To do this you will need to be logged in and click the "customize" link at the top of your blog window.  Next, once in the "back-end" you will need to be under the "Layout" tab.  Select the "edit HTML" option.  Your template's HTML code will appear below. 

Check the "Expand Widget Templates" box.  Click following image:
Step 3: 

Editing the Code The first step is finding the exact location of where to edit your Blogger blog code.  Insert code after you see the following line of code:

<div class='post-footer-line post-footer-line-3'>
The code you will need to insert is as follows:

For Digg:

<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Digg It!' border='1' height='40px' src='insert your direct link to Digg icon image here' width='40px'/></a>

For Stumble:

<a expr:href='"http://www.stumbleupon.com/refer.php?url="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Stumble Upon' border='0' height='40px' src='insert your direct link to StumbleUpon icon image here' width='40px'/></a>

For Delicious:

<a expr:href='"http://del.icio.us/submit?url="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Add to Delicious' border='0' height='40px' src='insert your direct link to Delicious icon image here' width='40px'/></a>

For Twitter:

<a expr:href='"http://twitter.com/home?status=Reading%20this:+"+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Tell Your Tweets' border='0' height='40px' src='insert your direct link to Twitter icon image here' width='40px'/></a>

 For Reddit:

<a expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='I Reddit!' border='0' height='40px' src='insert your direct link to Reddit icon image here' width='40px'/></a>

For Techorati:

<a expr:href='"http://www.technorati.com/faves?add="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Add to Your Faves' border='0' height='40px' src='insert your direct link to Technorati icon image here' width='40px'/></a>

For Facebook:

<a expr:href='"http://www.facebook.com/sharer.php?u="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Face It!' border='0' height='40px' src='insert your direct link to Facebook icon image here' width='40px'/></a>

For Mixx:

<a expr:href='"http://www.mixx.com/submit?page_url="+ data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Mixx it Up!' border='0' height='40px' src='insert your direct link to Mix icon image here' width='40px'/></a>

Imporant:

You will need to include the direct link to your image where the code indicates You will also need to input the correct height and width for the icon
Once you are done adding the changes to your template click "Save Template" to make the changes permenent. 

Step 4:  Get Some Custom Social Bookmark Icon Sets

The only thing left is to get some cool icons to save on your free image hosting account.  I suggest you check out the post from last week that has 10 of the best sets of icons around available for free downloading.  Here is the link to the post: link.  And to preview the post click here.

So, there you have it.  That is how to add custom social bookmark icons at the end of your of your Blogger blog posts.  If you have any questions regarding the code, or if I left off a site you like to use, or if you have any error messages--let me know and I will help figure them out for you.
~ Joeprah

Next >10 Most Creative Social Bookmark Icon Sets