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)

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFyKC_cKWUdSEeWoopoJaryzaufbVP6pZsXHa9coBaBvjQJby72W-S3EMkOmrhCEj9Tch2Ey-rZ4qx7o1VuvZFbvl7cKw4Jvc76pZTh0M7wkiCS8RyofA4Y66uqrDieg5M7B1lHlChP0B/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

 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!