Add Pinterst And Other Bookmarking Buttons To Images In Your Blogger Posts

Add Pinterst And Other Bookmarking Buttons To Images In Your Blogger Posts

On Spice Up Your Blog I have tutorials for lots of Social Bookmarking gadgets.We have posts showing how to add Social Bookmarking gadgets at the top of your posts, below your posts, scrolling beside your posts and in fixed positions.These are of course for readers to bookmark the content in your posts.But with so many Blogs having a focus on Images how about having the bookmarking icons appear on the actual images you have on your blog ?

People love to share images and the success of Pinterest has served to confirm this point.So in this post I have a tutorial to add social bookmarking icons from AddThis to your images, the icons will only appear when readers hover over the image and they appear with an overlay.

The buttons we are adding to the images are for Twitter, Facebook, Print, Pinterest, Google + and the Add This button which will cover all other services. 

Check out the demo below then follow the tutorial.

 

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code .

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/> 
<script type='text/javascript'>
var addthis_config = { 
services_overlay:&#39;facebook,twitter,print,pinterest,google_plusone_share,more&#39;
}
</script>

Add Class To Images You Want Bookmarking Buttons On

Now we need to add a tag to images we want the buttons on.

OK if your uploading your images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important - This is when you upload the image in compose mode.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" /></a></div>

You can see highlighted div class="separator" we change this to div class="addthis_shareable" like below :

<div class="addthis_shareable" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" /></a></div>

That's it the bookmark buttons will be on images you add this code to.

If you are adding images in html mode or adding externally hosted images your image code will be like this :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" /></a>

We add the class as shown below :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png"><img class="addthis_shareable" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonxtbigrPbDa89370c-_rchIQgxvbW7bSOW_fV76uoNn3A8Yvz-J7nr2xOXkaT-BMUkv9xO7u0AzzOgD-GCCN0_o7_W8HkYUJLwNUhJEXnOoayWHvG7OfBq3sUTNWU6dRy6tapbO6Afhc/s1600/image-effects-image-2.png" /></a>

That's the tutorial you now have your blog images ready to bookmark.

Other service can be added to the buttons that show and in the same vein some of the current buttons can be removed.If you have a request to add or remove buttons add it to the comments.