How to Add Pin It button to Blogger?

A Pin It button is just like a Facebook’s Like button or Twitter’s  Tweet button or Plus One button of Google+ as it allows visitor to share your posts without leaving your blog.  Installing Pin It button on your blog will do the same task.
So here is how you can add Pin It button to your each and every blog post.

Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.

Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->

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

<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>

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

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

</div>

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

</b:if>

<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before <data:post.body/> tag.

Step#6. Hit Save and that’s it! Check your blog Button appears or not on your post page.

The above code will help you to add Pin It button to each blog post you make. Now if you want to put the Pint It button outside the post area like Sidebar, Footerbar or anywhere in your blogger template follow the easy step given below.

Step#1. Copy the following code give below.

<a href="http://pinterest.com/pin/create/button/?url=Your Homepage url&media=your Blog logo&description=your Blog description"class="pin-it-button" count-layout="horizontal">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/print.js"></script>

 Step#2. Paste the above link mentioned in Step#1 any where you want to show Pin It button e.g. in a sidebar or footerbar.

Step#3. Change the url - Homepage to your blog url. Change the Blog Picture to your logo of your blog and change the Description tag with your own blog description.

That's it! You have successfully add the Pin It button to your bloggers blog.