Tuesday, April 16, 2013

How To Add Mouse Over Pin It Button


This morning I've added code to my blog's HTML that shows the Pinterest "Pin It" button when you mouse over photos in my posts. Try it and see! Now if you want to Pin a picture from this blog, all you have to do is click on that Pin It button on whichever picture it is that you are wanting to Pin and it will open Pinterest in a new tab ready for you to choose the board you would like to Pin to.

Cool huh?

I know I'm behind here in Bloggy world... but if you too are like me and didn't know how to incorporate this little function and would like to, I'd love to show you how!

I'm kinda lost when it comes to HTML but I found a super easy tutorial and I managed to make it work so trust me when I say if I can do it... YOU CAN TOO. :)

This tutorial is for Blogger (Blogspot). I'm not sure about Wordpress.

Ok,

In Design, go to Template > Edit HTML

Now scroll down until you see </body> and paste this code right above it:

<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 src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>

VOILA! Save your template and see if it works. It should. And now, when people are visiting your blog and see something they want to pin to a board on Pinterest, all they will have to do is mouse over whichever photo it is they want to Pin. Easy Peasy.

Giving credit where credit is due... I found this tutorial HERE

No comments:

Post a Comment

Blogging tips