how to add a pin-it hover image

UPDATE 11/27/16: I believe that this pinterest url is no longer valid and for some reason doesn't work. Maybe this will work for you, but it no longer works for me.                

Have you ever had one of these buttons, and wondered, 

how can I get it to hover over my image so that people can pin it?  

The tutorial and process to making this happen is quite simple, actually. In less than five minutes, you too can also have an image that hovers over your images on your blog and allows people to pin your photo. 

1. Find a cute hover button that you would like to show up over your images. 

When you find this image, upload it to a blank blogger document. 

If you need a website to obtain free and cute hover images, check out Pinterest, they have tons!

2. Obtain the url address for your image. 
Make sure you don't delete the page with your pin-it image if you end up publishing these on your website! If you end up deleting it, the image address that is used to identify your image will not be found and therefore your image will not show up. 
The simplest way to do this is to right click on your image in an empty blog post and click on the option that says Open Link in New Tab, which is the first option! 
When it opens to a new link, you can copy the link that is provided, as shown in my example. 

Your url for your image should always start with some sort of 3.bp.blogspot

3. Take your image url and paste it into this code. 
All you need to do for this step is to insert your image url into the bolded section of this code:

//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixl9k-tmgWUgcPjFalKfw6VJxoMf-_AfIMnqx79Q74Rp4yVu0HENRAkyNv9xYD5_J98fxBv_EuI9A5kVFx63KXACms-pY68Y5jWAPCqfIVH3e9vsziyeLTLyHRJL6S8S85OcDrPQgRrsA/s1600/pinit-button9.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>

4. Insert this html coding with your new image url into the edit html section of your template tab. 

Place this coding directly above the tag. 

I'm not exactly sure if there is a specific place you have to place this code, so this is just where I placed it in my coding.



And there you go! There is the simple way to insert a pin-it hover buttons over your images!