Hello! Trickiezone.com is now under maintenance.
Home » Blogger » Pinterest Pin It Button On Image Hover For Blogger

Pinterest Pin It Button On Image Hover For Blogger

Looking for Pinterest Pin It Button for your Blogger blog? Today! I just want to share this awesome Pinterest widget created by Blogger Sentral. Pinning an image is much easier and more intuitive with this button, in just one click to your image, no need any button plugins needed. Proceed to the instructions below for the step by step procedure on how to add this widget. (See the demo in my image provided below)

Pinterest Pin It Button On Image Hover For Blogger

How To Add Pinterest Pin It Button To Blogger:

  1. Login to your Blogger account.
  2. Go to Template → Edit HTML.
  3. Press Ctrl+F and find tag.
  4. Copy the code below and paste it before  tag.
  5. Save the template.
  6. Done!


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 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 developed by bloggersentral.com.
//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
//Please do not remove this attribution.


  • Remove jQuery script if you have already a jQuery plugin in your template.
  • You can use your own image button, just change the URL of image button at line (3).
  • You can change the position of the image button at the line (4) with topleft, topright, bottomleft and bottomright.
  • To add a prefix/suffix to the pin description, simply add your text inside the quote.

Like this:

var bs_pinPrefix = “from Trickiezone.com”; or var bs_pinSuffix = ” from Trickiezone.com”;


  • To block the button from appearing on image just add class=’nopin’ or div class to your image tag.

Like this:

<img border=”0″ class=”nopin” height=”391″ src=”http://4.bp.blogspot.com/-0M15nr-GR58/UVQOJxSo2MI/AAAAAAAABis/q-UNK1Cj-6M/s320/pinterest+pin+it+button.JPG” width=”400″ />

Or Like this:

<div class=’nopin’>
<img border=”0″ height=”391″ src=”http://4.bp.blogspot.com/-0M15nr-GR58/UVQOJxSo2MI/AAAAAAAABis/q-UNK1Cj-6M/s320/pinterest+pin+it+button.JPG” width=”400″ />

Hope that this article helped you, Subscribe us if you found this article useful and also to get a free updates directly to your email inbox. Feel free to ask a question regarding to this topic. Enjoy and happy blogging.