Following the publication of our article on Pinterest plugins, many of you inquired via comments / emails / social networks how to add with Blogger the “Pin it” icon button when scrolling over an image. With WordPress it’s quite straightforward, whereas with Blogger it can be much more complicated, especially for those who hate modifying the code for their blog.
Luckily, we found a much easier way to install it on blogger, and we’ve decided to share it with all of our readers!
1. Because Pinterest is an important source of traffic for your blog, especially if it mostly relies on visuals.
2. Because if your readers see a picture at the beginning of the article that they like and they wait till the end of the article to find the Pin It button, they may forget to actually Pin It.
3. Because by hovering over the image and seeing the “Pin It” button, it’s possible that your readers will think “Oh I want to Pin It”
1. Install the extension Pin it Button For Images on your blog.
2. You can keep the original icon button or download your own custom icon button.
3. Uncheck the case “Disable the fade in / out on the button?” so that the “Pin It” button is only visible when the reader has the cursor hovering over the image.
To the left, the original icon button, to the right, an icon button customized by Wedding Chicks
1. Make sure you save everything beforehand! Go to “models” then click “save / restore” and then “Download the entire model.” This way, you ensure you won’t lose anything.
2. Go to “model” and click “edit HTML”. Search among the gibberish with your function ctrl+F the tag : </ body>
3. Paste the following code just before the tag </ body> :
<script>
//<![CDATA[
var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png“;
var bs_pinButtonPos = “topright“;
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>
– You can create your own button if you don’t care for the original one. You can simply create it (a 50x50px size seems ideal) and host it on Picasa, image shack or any other. Get the address of the image (right click > copy the address of the image click) and paste it to replace the red line in the code.
– The default button is placed at the top right but you can change it up by replacing the topright mention in blue in the code with:
center
topleft
bottomleft
bottomright
Tadam! You can now save your template and check your blog to make sure the button works properly!
Thanks to Bloggersentral for the tips!
Share with us your blog with your new Pin-It button in the comments below 🙂
