Todays tutorial will show you how to add a hover/mouse over pin-it button to your blog images on blogger. I show you two methods, one for the official Pinterest button and another for adding a custom button. This feature makes it really easy for your readers to save blog posts and images to their Pinterest boards that link back to your blog. It’s a great way to get some extra traffic to your blog from Pinterest! Another great way is to use Rich Pins, you’ll find a tutorial for that here.
official hover pin it button
1. Go to Pinterest dashboard and click the drop-down in the upper left hand corner. Choose Business > Tools and scroll down until you see “Make a Pin it Button”. Clicking this link should bring you there. Select the button type as “Image Hover”, select the appearance and press “build it”. Copy the entire code which will look similar to
In order for Blogger to accept the code, we need to add we need to add
defer as shown below.
2. Open your Blogger blog, go to Template > Edit HTML. Find
</head> and paste the edited code in the previous step above
</head>. If you have trouble finding the code in Blogger HTML Editor check out this post for help.
3. To remove the button from certain images and prevent your readers from pinning it, add the “nopin” attribute to the image. To do this go to your post or page, switch from compose view to HTML mode and find the img src markup for the image you’d like to make unpinnable. Simply add
nopin="nopin" before the closing
> like so
<img src="direct image link" border="0" alt="description" nopin="nopin">
4. This is Pinterests official button so you can contact them to get help here if you need to.
Custom hover over pin it button
1. First you’ll need to find a pin-it image that you want to use. I have 40 pin-it buttons available to download here or you could always create your own. Upload the image to a hosting site such as Dropbox, Photobucket, Flickr, etc.
2. Login to your Blogger blog and go to Template > Edit HTML > Format Template. Find
</body> and add the following code from bloggersentral right above it.
3. Enter the direct url of the button you uploaded earlier to
DIRECT IMAGE LINK.
4. Change the position of the button by changing
5. To add text for the pin description write it between the quotes
" " for
var bs_pinPrefix and
6. If you already have a jQuery script loaded into your blog that looks similar to
7. To remove the button from a certain image simply go to your post or page, switch from compose view to HTML mode and find the img src markup for the image you’d like to make unpinnable. Add
class='nopin' before the closing
> like so
Buy me a coffee
<img src="DIRECT IMAGE LINK" border="0" alt="description" class='nopin' >