Home
Blogger

Add Pinterest Pin It button in Blogger on Image Hover

Add Pinterest Pin It button on Blogger Images
pinterest

Pinterest is a social media site that made for graphics hunger. Main purpose of the pinterest to share graphics from its users to viewers. So we can say this is image based social media service. In blogger site we add different social media post sharing widget thus a reader can easily can share the post. However in case of Pinterest pin it button work like magic. Because when any user mouse over on blog post image then Pinterest Pin It button will appear. Any user will able to pin an image by click on Pin It image.

This widget will enable a user easy pinning. Just you have to choose which photo you want to pin. In addition the feature of this widget are-
  • This widget will able to detect post title and post URL automatically.
  • It will automatically grab the post description with post title.
  • Blogger can use their own pin button, if they wish bigger button.
  • Easily movable the pin button position.
  • This widget also compatible with cross browser, like Firefox, Chrome and more.
Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </body> by pressing Ctrl+F

Step 4 Copy the below code and Paste the code above/before </body> 

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xsM6XBCXiZO1Fcae6CbYFYO1hfPYUxnbiQK1Eos8RqREAx6QXnSupD8fihmFkgjLZ1ehrrw16rmK0KyY1mmsw6DdePDWrfJJVS57n0lje_lCv-W2WWA6AXQF1QjE2LQwtKWkFI7x_-uA/s1600/BloggerSpice+Pinterest-Pinned.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='spice-pin' type='text/javascript'>
/*<![CDATA[*/
jQuery(document).ready(function($){$('body').append('<img style="visibility:hidden;" class="loadpinitbutton" src="'+custom_pinit_button+'" >');$('#spice-pin').hide();var l;var m;var n;$('.loadpinitbutton').load(function(){m=$('.loadpinitbutton').outerWidth(true);n=$('.loadpinitbutton').outerHeight(true);$('.loadpinitbutton').remove()});var o=$('#spice-pin').html().indexOf("bloggerspice.com");o!=-1&&hoverCheck();function hoverCheck(){$('.entry-content img,.post-body img,.entry-summary img').not('.nopin,.nopin img').mouseenter(function(){$('.pinit-visibility').css("visibility","hidden");clearTimeout(l);var a=$(this);var b=parseInt(a.css("margin-top"));var c=parseInt(a.css("margin-left"));var d;var e;switch(pinit_button_position){case'center':d=a.position().top+a.outerHeight(true)/2-n/2;e=a.position().left+a.outerWidth(true)/2-m/2;break;case'topright':d=a.position().top+b+5;e=a.position().left+c+a.outerWidth()-m-5;break;case'topleft':d=a.position().top+b+5;e=a.position().left+c+5;break;case'bottomright':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+a.outerWidth()-m-5;break;case'bottomleft':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+5;break}var f=a.prop('src');var g=a.closest('.post,.hentry,.entry').find('.post-title,.entry-title,.entry-header');var h=g.text();if(typeof pinit_button_before==='undefined'){pinit_button_before=''}if(typeof pinit_button_after==='undefined'){pinit_button_after=''}if(g.find('a').length){pinitURL=g.find('a').attr('href').replace(/\#.+\b/gi,"")}else{pinitURL=$(location).attr('href').replace(/\#.+\b/gi,"")}var i='<div class="pinit-visibility" style="display:none;position: absolute;z-index: 9999;" ><a href="http://pinterest.com/pin/create/button/?url='+pinitURL+'&media='+f+'&description='+pinit_button_before+h+pinit_button_after+'" style="display:block;outline:none;" target="_blank"><img class="pinimg" style="-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;opacity: 0.8;background:transparent;margin: 0;padding: 0;border:0;" src="'+custom_pinit_button+'" title="Pin on Pinterest" ></a></div>';var j=a.parent().is('a')?a.parent():a;if(!j.next().hasClass('pinit-visibility')){j.after(i);if(typeof l==='undefined'){j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible'")}else{j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible';clearTimeout(pinitOnHover)")}}var k=j.next(".pinit-visibility");k.css({"top":d,"left":e});k.css("visibility","visible");k.stop().fadeTo(300,1.0,function(){$(this).show()})});$('.entry-content img,.post-body img,.entry-summary img').on('mouseleave',function(){if($.browser.msie){var a=$(this).next('.pinit-visibility');var b=$(this).parent('a').next('.pinit-visibility');l=setTimeout(function(){a.stop().css("visibility","hidden");b.stop().css("visibility","hidden")},3000)}else{$('.pinit-visibility').stop().fadeTo(0,0.0)}})}});
//]]>
</script>

Step 5 Finally hit the Save template button.

pin it

If your template contain below JavaScript file then simple remove the code from Pinterest widget code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Customization

  • To change the position of the Pin It button change Center with topleft or topright or bottomleft or bottomright. 
Hope you have successfully added the Pinterest Pin it widget on mouse over. If you can't add this widget then feel free to leave a comment below. 

6 comments

  1. Wow, thank you so much.
    • Welcome Даниел
  2. Hi there,

    Just wondering if there is a way to remove the Pin It button from my signature? :-( my blog is www.reflectionofsanity.com and I recently added signature but couldn't figure out for the life of me how to remove the Pin It button from it! I want to keep it for my blog but just want to remove it from my signature. Please help?

    • Hi Shireen... Pin it button will automatically work on all images of Blogger Post body. And Pin it button displaying on your signature because you are using Signature Image. So it is not removable.

      I just visited your site and found the Pin it button code. If you wish you can remove this feature. To remove the pinterest pin it button go to Blogger Dashboard->Template->Edit HTML and find the code like below and remove it.

      <script>
      //<![CDATA[
      var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
      var bs_pinButtonPos = "topleft";
      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>
Go Up