Tuesday, 6 January 2015

Add Pinterest Pin It button in Blogger on Image Hover

Add Pinterest Pin It button in Blogger on Image Hover
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 = "http://4.bp.blogspot.com/-d0NyZry0PU8/VKUjffKEdeI/AAAAAAAAI1I/bHNEos5BVBc/s1600/BloggerSpice%2BPinterest-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("helplogger.blogspot.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.

Add Pinterest Pin It button in Blogger on Image Hover

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. 
Previous Post
Next Post

post written by: