In April, Pinterest quietly released a major update to the Pin It buttons. You can now add hovering Pin It buttons to the upper left corner of your blog's images with one just line of code. This is by far the simplest way to add Pin It buttons! Here's how to add them to your Blogger blog.
This works on all Blogger templates except Dynamic Views, which doesn't accept customization. The Pin It buttons appear on images with a minimum width of 200px and a minimum height of 100px. Smaller images are skipped.
For Pinterest Widget Users
If you're already using the official Pinterest board or profile widget on your blog, you already have most of the code in place. All you need to do is add data-pin-hover="true" to the existing code in your template, so it looks like this:
For New Users
If you're not using the board or profile widget, no worries. It's easy to add the code!
First, Back Up Your Template
From your Blogger dashboard, go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file somewhere safe.
Find the </body> Tag
Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.
When your template is open, hover your cursor over the code, click once, and press CTRL and F at the same time (PC) or Command and F (Mac). This will open a search box in your template.
Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template.
Add the Code
Immediately above the </body> tag, enter this line of code:
Press the orange "Save Template" button up top to save your template. Then, go look at your blog. You should see Pin It buttons appear in the upper left corner of your images when you hover your cursor over each image. Nice, right?
How to Remove the Button From Certain Images
There are two ways to remove the buttons from individual images. If you want to remove the button from an image and prevent your readers from pinning the image from the pinmarklet, add the "nopin" attribute to the image.
To add the nopin attribute to an image in a post or page, switch over to the HTML view of your post or page, and find the img src HTML markup for the image you'd like to "nopin". It will look something like this:
Enter nopin="nopin" right after your image's width attribute:
When you save your post, the Pin It button will disappear from that image. It also won't be pinnable through the Pinmarklet, so use it sparingly!
If you'd prefer to remove the button from an image, but still let pinmarklet users pin the image, you can add the data-pin-no-hover="true" attribute to your image link instead. The process is the same as for the nopin attribute, you just enter data-pin-no-hover="true" instead.
Update: How to Remove the Pin It Button from Header Images
This doesn't happen to everyone, but some of my readers have the Pin It button appearing on their header image, too. If this has happened to you and you'd like to remove it, you just need to add a little bit of extra code. First, back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the </body> tag, after your Pin It button code:
These buttons are official, Pinterest-created buttons, so you can get support directly from Pinterest if you need it. You can read the button documentation and contact Pinterest support here.