Hello! Today 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 blogger 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. Here's a freebie code, for a pinterest button that may better suit your blog:
Image: 
Code: http://i1079.photobucket.com/albums/w510/fflcgirl/5a3e610d-abfa-406f-99d7-94ba48ba74f6_zpse715a625.png
Alright, well, I believe that's all for now! :) If you have any questions and/or concerns, just comment below! I'm happy to help.
Alright, well, I believe that's all for now! :) If you have any questions and/or concerns, just comment below! I'm happy to help.
Thank you so much for this tutorial! I can't wait to use this on my blog :)
ReplyDeletexoxo,
Bethan
I just added this to my blog, thanks for writing this post!
ReplyDelete