HOMEPAGE

Create something.

December 29, 2015

How To Add A Custom Pin It Button On Image Hover


Hello! In today's #TutorialTuesday I am going to do a requested tutorial on how to add a custom pin it button on image hover. :)

Instructions:

1. Log in to your blogging account and select the blog you'd like to add your pin it button to.

2. Go to Template >> Edit HTML and locate the </body> tag.

3. Copy the code below, and place it directly above the tag.

+ + +

<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='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>

+ + +

To reposition your pin it button, replace center with:

+ topleft
+ topright
+ bottomleft
+ bottomright


4. Save your template and tada! You've got a hovering pinterest button. To customize this, change the image URL in the code (I've colored it red), and replace it with one of your choice.


Comments? Questions? Concerns? Connect with me below!

No comments

Post a Comment