Pinterest Buttons With Counters For Blogger

The Pinterst now became the social media network of 2012 with more than 10.4 million registered users and 50 million blog posts. Daily Pinterest users have increased by over 145 percent from the beginning of 2012. This is a new networking site but is emerging amongst the existing popular social network giants like - Facebook, Twitter, Google Plus and LinkedIn. So now the task comes grabbing traffic to our blog from Pinterest. As other sites, Pinterest provides a button called "Pin It". These buttons help in increasing the traffic, similar to the buttons like - "Share", "Like" and "Tweet". So lets start our work on adding these buttons to our blog. 

How To Add Pinterest Buttons To Blogger?

1. Go To "BLOGGER" > "TEMPLATE".

2. Backup your template.

3. Click on "EDIT HTML"

4. Click "PROCEED"

5. Check the "EXPAND WIDGET TEMPLATES" box

6. Search for this code :

<data:post.body/> 

Now if you want to add the button, below your post titles then paste the codes provided just before/above the above code(<data:post.body/>). If you wish to add the button below your post then paste the provided codes just below/after the above(<data:post.body/>) code.

Horizontal Count

 <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>

Vertical count 

<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>

Today you have learned to add a pinterest button to your blog and how to promote your blog with it. We will be posting more such posts on pinterest and others. Stay tuned to blogger tricks hut. Don't forget to pin this post.