How To Add Pinterest Image Hover Button In Blogger

In my previous post I shared some beautiful Blogger templates. In this post I will show you how to add Pinterest Image hover button in Blogspot blogs. It will allow your Blog users to pin your image to Pinterest very easily. It's easy to insert the image hover button. You will just have to paste a little code in your blogs html. I will show you how to add this code. Let's start the tutorial...
Pinterest is one of the best social networking site and when it comes to collecting your favourite images and photos the Pinterest is the best place for that work. It also plays a role in SEO. Well I will not confuse with SEO now. Many users like to collect and share beautiful images from the web. By inserting Pinterest image hover button in your Blog, make sure you are giving this opportunity to your users. It will really make your website to become more social and user friendly.

Add Pinterest Image Hover Button In Blogger

Adding Pinterest Image Hover Button

Adding image hover button in Blogger has never been so much easy and simple before. In this tutorial I will make you familiar with the three different ways to add Pinterest Pin It! button in Blogger. whenever your users will hover mouse on the photos the Pin It! button will appear in your images. I have also inserted one in my website. Let's discuss each ways one by one in detail.

First of all backup your template. It will help you in future if by mistake your template gets corrupted.

• To Backup Template Go To Blogger Home > Dashboard > Template and than Click On Backup/Restore Template.
• Keep The Template You Downloaded In Safe Place.

Now The Time For Inserting Pinterest Image Hover Button:

There Are Two Official Ways To Insert Image Hover Button In Your Images.

1. First Method:

• Go To Blogger Home.
• Than Go To Dashboard.
• After That Go To Template.
• Than Click On Edit html.
• Now Press Ctrl+F To Open search Box. Search For '</head>. Than Paste The Code Given Below Just Above '</head> Tag.

<script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.setAttribute('data-pin-hover', true);
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script>

• Save Your Template.

That's It You Have Inserted Pin It Image Hover Button In Your Blogger Blog.

       
         2. Second Method
This method is easier than the first one. With just one line of code the pin it image hover button will be inserted.

• Like Before Go To Blogger Home > Dashboard > Template.
• Than Click On Edit Html.
• After That Search For '</body>' Tag. You Can search For This Tag By Pressing Ctrl+F And Write '</body>' Tag In Search Box.
• Than Paste The Code Given Below Just Above/Before Closing Body tag (</body> Tag).

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Adding Pin It! Button

• Save The Template.

You Are Done. Now The Pin It Button Will Appear When Will Be Hovered On Image.

3. There is one another method to add pin it! button. This method isn't official. But it offers more customization options. This is supplied by bloggersentral.com

1. Follow these steps to add pin it! button with blogger sentral script.

• Let me remind you to backup your template.
• Now go to blogger home > dashboard > template.
• After that click on edit html.
• Now search for closing body tag. Just type '</body>' on search box without quotes and hit enter.
• Now paste the code given below just above/before '</body>' tag.

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDUe6CBYs4RY3A6BUW1jTU8XzWOx7dFaInVQhc26GmTBXk2yos3pyzNecBflff8igrermIeFhpzyd2dLB3PN97F9TlMkOr32hq-9gWbrdPMM4rXmUQcThd4mg5N9MYTA5g_sRrFHP0C8j/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
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>

• Save template.

Further customisations

1. To use your own button. You can replace the url in line 3 with your own url/link of the pin it! image. The URL that you have to change is in line three on the above shown code. Feel free to replace it with your own beautiful Pin It! image.
2. You can also align the pin it! button. To align the button, replace 'center' in line 4 with the new positions listed below:

• topright
• topleft
• bottomright
• bottomleft

Don't edit the code other than URL or align. If done the button may not work.

How To Remove Pin It! Button From Particular Images
Many of you may have some images that you will only want to show in your blog. If you don't want to show Pin It button on a particular image than I have a trick for you. It's not so much difficult task to remove Pin It! button from certain images. You will just add two words in the img src tag of your image in HTML mode of Blogger post editor. Just follow the below steps to do it.

• Go to the post editor on that post.
• Now switch to HTML mode. In the HTML view locate the image on which you don't want the Pin It! button to appear. See the image below:

See Width After Text Highlight

• After you find your image add/write nopin="nopin" right after the images width attribute. See image to know more to disallow Pin It! button.

Add nopin="nopin" just after width attribute as shown in image

This method will prevent pinning of your images from your blog as well as from the pinterest pinmarket. If you to allow pinning from pinmarket than add data-pin-no-hover="true" attribute in place of nopin="nopin" in the above step.

That's all!

Hope you like the tutorial on adding Pinterest image hover button in blogger.

If You face Any Problem Than Do Comment.