0 Adding Pinterest Pin It Button (With Counter) To Blogger Post

Adding the "Pin it" button

Please don't edit the code below and neither add it inside Tables or div sections because the JavaScript is not well scripted and is sensitive to slightest of change in styling. Use it as given.

1. Go To Blogger > Template
2. Backup/restore your template
3. Click the Edit HTML button
4. Click Proceed
5. Click the box "Expand Widget Templates"
6. Search for this code:

<data:post.body/>

   Now if you wish to add the count button below post titles then you will have to paste the coming codes just above the code in step#6 otherwise if you wish to display the button at the bottom of posts then add the coming codes just below step#6 code.

      7.  Paste the following code below or above (depending on your choice of location) the code in step#6

For horizontal count Use this code:

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a> 

<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> 

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 

<script type='text/javascript'> 

function run_pinmarklet() { 

var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); 

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); 

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); 

document.body.appendChild(e); 

} 

</script>

For Vertical count Use this code:

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a> 

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> 

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 

<script type='text/javascript'> 

function run_pinmarklet() { 

var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); 

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); 

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); 

document.body.appendChild(e); 

} 

</script>

      8.   Save your template and you are all done!