“IMPORTANT UPDATE: The previous code doesn’t work anymore because the code source changes it. I have updated the blog post with the new code. If you have borrowed your code from here and it doesn’t work anymore, please update with the new code.“
For the longest time, I was wondering how to add image hover pin it button. It was such a brilliant idea and there were so many cute pinit buttons, so I couldn’t resist finding out how to do that and add that feature to my blog also. And I found one and it worked for me. I thought of sharing it with you guys if you are also looking for a tutorial on how to add a cute pin it button to your blog posts. Here I only explained it in blogger platform obviously because I’m using blogger.
First, you need a cute pin its button, either you can make one on your own, or you can download one on the internet. Once you have your pinit button save it to your hosting account. For me, I use Photobucket for my images. If you want free pin buttons or want to create pin it button by yourself head over to this blog post. You can download those buttons and use them on your site.
If you are new to blogging, you might wonder what is image hosting website is. It allows you to upload your image to their site and then store it in a server. Then you can get different links which allow others to see your images.
Once you upload the image to Photobucket, there are four links listed under shared links. The links are “Email and IM”, “Direct”, “HTML” and “IMG”. You want to copy the Direct link. Once you click on the link, it will copy. Save this link in notepad you’ll need this link.
Here is the code for your blog. This code is not mine. I borrow it from here.
<script>
//<![CDATA[
var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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=’https://googledrive.com/host/0B40RQ963OElISE9lY1E1YS1lU28/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>
Go to your blogger template select Edit HTML
Find the </body> tag at the bottom of your template and insert the code above it.
Replace the URL highlighted in red color with the one you copied. The one from Photobucket Direct link which you saved in a notepad.
Don’t delete ”” while you delete code in red
To change the position of the button changes the green word to:
top left, top right, bottom right, bottom left and save the changes.If you want to remove Pinit button from certain image simply add the following attribute to the IMG tag
class=’nopin’
For example
<img border=”0″ class=’nopin’ height=”200″ width=”133
src=”https://2.bp.blogspot.com/-NS4cbJSp9ZA/V086vSbDJtI/AAAAAAAAB64/0h_tMP%2BRICH%2BPINS.jpg” />
src=”https://2.bp.blogspot.com/-NS4cbJSp9ZA/V086vSbDJtI/AAAAAAAAB64/0h_tMP%2BRICH%2BPINS.jpg” />
Now you are ready to go. Happy pinning!!
