The code i will give you is the official Pinterest code, so i would assume it is the best one you can install on your website. How it works is that the Pin It button appears every time somebody hovers with their mouse over a picture on your site...
First of all Backup/Save your current template, just in case something goes wrong, but there shouldn't be any problems as the tutorial is easy and simple.
To install the button, go to your Blog's Dashboard, then click Template, then Edit HTML.
Now, in the HTML area of your blog, look for the following piece of code:
</body>
Once you find it, ABOVE that code, you will need to paste the following piece of code:
<script type= "text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
After that, save the Template, and go to your site, you should see the "Pin" button whenever a picture is hovered over with the mouse pointer.
My understanding is that this hovering effect will not be shown to users with a Mobile, only if there is a mouse present will this button be shown. However, personally i like the button since it doesn't take any space on your site anywhere and only appears when and where it actually needs to appear...
For any questions, comment below, and if i can, i will help.. :)
=================================================
My Previous Tutorials:
1. Creating a Blogger Blog:
http://soap-bubbles-land.blogspot.com/2015/12/blogger-tutorial-creating-blogspot-blog.html
2. Blogger tutorial for sharing links on Facebook!:
http://soap-bubbles-land.blogspot.com/2016/06/blogger-blogspot-tutorial-sharing-links-facebook-debug-thumbnail.html
3. Blogger Archive Tutorial - Expand/Collapse:
http://soap-bubbles-land.blogspot.com/2016/06/blogger-archive-expand-collapse-tutorial-guide-blogspot.html
4. Blogger Tutorial - How to add borders to gadgets:
http://soap-bubbles-land.blogspot.com/2016/07/blogger-tutorial-how-to-add-borders-to-gadgets.html
5. Blogger Tutorial - How to add a separation line & how to adjust the space between Gadgets:
http://soap-bubbles-land.blogspot.com/2016/08/blogger-tutorial-how-to-add-separation-adjust-space-gadgets-backup-template.html
6. Blogger Tutorial - How to change the background color of a specific Gadget:
http://soap-bubbles-land.blogspot.com/2016/08/blogger-blogspot-tutorial-how-change-background-color-specific-gadget-widget.html
7. Blogger Tutorial - How to add borders and change the background color to posts!
http://soap-bubbles-land.blogspot.com/2016/08/blogger-tutorial-how-to-add-borders-and-change-background-color-of-posts.html
============================
My Blogger Blog:
http://seriouslyfunnyhumor.blogspot.com/
============================
Find me on Twitter:
https://twitter.com/Lionsnr892
============================
Find me on Google+
https://plus.google.com/+JamesYoung24
============================
+Blog +Free-blog +Blogger +Blogspot +Create-blog +Blog-creation +Starting-a-blog +Starting-blogspot +Creating-blogspot +Gmail +Google +Website +Personal-blog +Blogger-tutorial +Facebook +Facebook-thumbnail +HTML +Blogger-HTML +Facebook-cache +Facebook-preview +Website +Archive +Blogger-archive +Blogspot-archive +Blogger-archive-expand +Blogger-archive-collapse +Blogger-archive-gadget +Blogger-gadget +Blog-widget +Blog-gadget +Blog-border +Blog-gadget-border +Blog-widget-border +Add-borders-to-gadgets +Add-borders-to-widgets +Blogger-add-gadget-borders +Backup-restore +Backup-template-blogger +Separation-lines-gadgets +Separation-lines-widgets +Adjust-space-between-gadgets +Css +Add-CSS +Add-custom-CSS +Blogger-gadgets-separation-lines +Blogger-widgets-separation-line +Blogger-adjust-space-between-gadgets +Blogger-adjust-space-between-widgets +Background-gadget-color +Edit-specific-gadget-background-color +Blog-post +Blogger-posts +Blogger-posts-background +Blog-posts-borders +Blog-posts-background-color +Pinterest-share +Pinterest-sharing-button +Blogger-pinterest-share +Pinterest-photo-hover-sharing
Picture: Google "Free to Use" Pictures ---> www.flickr.com
↠ This post was originally published on Bubblews in the Tutorials category by me (Bubblerian) on September 01st 2013.
No comments:
Post a Comment