Thursday, March 22, 2012

Add Pinterest Pin it button to Blogger, Blogspot


Here are steps you need to follow if you want to add a Pinterest Pin it button into your Blogger. Most of the People are giving tutorial for adding a Pin it button in their wordpress but found this tutorial for blogger.

Steps to Follow:-

Important: Always backup your template before you do anything described in this post! I will NOT responsible for any damage or template error on your blogger template.

  • Go To Blogger => Design => Edit HTML
  • Click Expand widgets templates box
  • Search for following code:-
    <data:post.body/>
  • If you want to add the button below your post titles then add the Main Code just above following code:-
    <data:post.body/>
  • If you want the button appear at the end of your posts then add the Main Code just below following code:-
    <data:post.body/>
Main Code:-
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img style="margin: 0 0 -5px 0;" onclick="doPinIt();" src="http://i43.tinypic.com/a4cx5.png" alt="Pin It" /></a>


Hit save and that’s it!

Note: The above code is currently using my PinIt-Compact button, if you wish to replace the button with your own button or Pinterest PinIt button replace the source image “http://i43.tinypic.com/a4cx5.png” to your button source image/location.

Please leave you Queries in comments and I will try to answer all.
Pin It

0 comments:

Post a Comment