How to add Pinterest Pin it Button to Blogger

Pinterest is a social sharing site, which allows you to organize and share(pin) your interest, has now become so popular as the site is more simple,  beautiful and organizable.

Now they launched their sharing buttons known as "Pin it".

Pinterest share button has counter and comes in different sizes. So choose your size as I show you how to do that.

How to do it:

1. Go to your blogger Dashboard > Template and click "Edit HTML"

2. Now click any where inside the HTML box and press Ctrl+F, a search box will open.

3. Find </body> by typing inside the search box.

4. Now simply copy and paste the code right above the </body>.

       <script type="text/javascript" src="//assets.pinterest.com
       /js/pinit.js"></script>

 5. Find <data:post.body/> and before/after it (or both) add any one of the following codes: 



         
      Horizontal Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float:left;padding:4px;'>

<b:if cond='data:post.thumbnailUrl'>

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

  <b:else/>

           <a class='pin-it-button' count-layout='horizontal' expr:href='&
           quot;http://pinterest.com/pin/create/button/?url=&quot; +  
           data:post.url + &quot;&amp;media=http://your-image.jpg& 
           amp;description=&quot; + data:post.title'>Pin It</a> 

</b:if>

</div>

</b:if>

  Vertical Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='vertical' expr:href='&
quot;http://pinterest.com/pin/create/button/?url=&quot; +
data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl
+ &quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='vertical' expr:href='&
quot;http://pinterest.com/pin/create/button/?url=&quot; + 
data:post.url + &quot;&amp;media=http://your-image.jpg&
amp;description=&quot; + data:post.title'>Pin It</a>

</b:if>
</div>
</b:if>           

If you don’t want any count for the Pinterest share buttons then add the following code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com
/pin/create/button/?url=&quot; + data:post.url + 
&quot;&amp;media=&quot; + data:post.thumbnailUrl + 
&quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com
/pin/create/button/?url=&quot; + data:post.url + 
&quot;&amp;media=http://your-image.jpg&amp;description=&quot; 
+ data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>             

6. Save your Template and get the result.