Add Pinterest Pin It button in Blogger on Image Hover

Add Pinterest Pin It button on Blogger Images

6
data:blog.title
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 = "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("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. 
Add Pinterest Pin It button in Blogger on Image Hover
4 Stars stars - "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 ...

Wow, thank you so much.

Welcome Даниел

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>

Thank you so much! It's finally removed! xx

Welcome Shireen

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *