How to Add On-Hover Pin It Buttons on Blogger Images

In this article I'll be discussing how to add on-hover pinterest pin-it button on blogger images. the button will automatically show as soon as a reader will hover the mouse cursor on a blogger image. This trick of just 5 minutes will help add sophistication to your blog and make it more user friendly to directly pin images in your blogger post to their Pinterest board . On Hover Pin It buttons work like regular Pin It buttons, but remain invisible until someone mouses over an image in your post.



Note: Be careful about using On Hover Pin It buttons on sites intended for mobile browsers. Since there's no hover interaction on touch screens, On Hover Pin It buttons won't show up.


Steps to activate:

To show On-Hover Pin It buttons on images you just need to run the pinit.js script on you blog.

1.  Copy the code (This code will run the pinit.js script inside the blog/website) :
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"
    data-pin-hover="true"
></script>
2. Next sign in to your blog.
3. Go to Template > Edit Html.
4. Press Ctrl+F and search for the </head> tag.
5. Paste the script just before the </head> tag and click Save Template button.

All Done!

Preview:




Note: This technique can also be applied on any HTML Website. Just copy and paste the script before the </head> tag in the website's html code.
Do you find this post useful? Let me know in the comments!

No comments:

Powered by Blogger.