Friday, November 8, 2013

Step by Step: A tutorial for adding a hovering Pinterest icon to your blog images

When trying to follow directions through any tutorial, I am super visual. I want a picture for every step. 
Though I always figure it out, it goes much faster when I have a picture example to follow. 

I wanted to add the Pinterest button over my blog images, but the tutorials out there took a little extra brain power to navigate. When trying to edit my blog template there were so many codes (aka foreign language). 

I hope that this picture tutorial will make it a little easier on you! The pictures under the directions are just close-ups. I thought the images were a little hard to see. 

But, if you want to download the PDF version to keep just click HERE!

 Larger image:

 Larger image:

 Larger image:

Here is the code: (I know it's a long one)

var bs_pinButtonURL = "";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
<script src='' type='text/javascript'></script>
<script id='bs_pinOnHover' src='' type='text/javascript'>
// This Pinterest Hover Button is brought to you by
// Visit for details.
// Feel free to use and share, but please keep this notice intact.

 Larger image:

If the link in the picture above isn't working click HERE and it will take you there. 

 Larger image:

 Larger image:

Let me know how this worked for you! 


  1. By inserting Pinterest image hover button in your Blog, make sure you are giving this opportunity to your users. It will really make your website to become more social and user friendly.
    website design

  2. I have been searching and searching for an easy tutorial on the pintesrest hover button,and this by far is the BEST one! You rock :-) Thank You thank you!!