Add Pinterest Pin it Button To Blogger

Pinterest is a new social Networking site where you can share or Pin the images found in the web. Pinterest is an online pin board where you can pin web photos/images/Videos and the images are displayed on Pinterest with a link to the source page of the image. Your friends and followers can re-pin your image to their Pin Boards making your image and the post on your blog containing the image.Inspired by Way2Blogging

Pinterest is the fastest growing and Being one of the top social networks on the Web Driving More Traffic than Facebook and Twitter. By adding the Pinterest Pin It button to your blog, your readers can easily Pin the images to their Pin Boards and you will get a good amount traffic from Pinterest.So Add the Button By Following Below Steps.

Add Pinterest Pinit Button to Blogger:.

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Search for </head> and place the below code before it!

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>

Now Adding Pinit Button Script.

1. Search for <data:post.body/>
2. Place the Bellow Pin It Button script before or after it

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
 <data:post.body/>
 <script type="text/javascript">
  w2bPinItButton({ 
   url:"<data:post.url/>", 
   thumb: "<data:post.thumbnailUrl/>", 
   id: "<data:post.id/>", 
   defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRToQjBW1oW_C5YRyFmgekgh2f-IwtmiMSqpOspZED1pObKXIpoEe-aQOsr1l3hIPb0J_FfcE3v-pNw-nMrn_LQYmkNC6tHBU314GAlGpIyH2e8NWdEIrk96o5Ee1_gMhPJxPNjtBltBPS/s1600/w2b-no-thumbnail.jpg", 
   pincount: "horizontal" 
  }); 
 </script> 
</div> 
</b:if>

- If you add the below code before the <data:post.body/> then it will appear the Before the Post Content.
- If you add the below code after the <data:post.body/> then it will appear the After the Post Content.

ADDING STYLINGS

Add the below styling before ]]></b:skin> tag.

.w2bPinitButton{ 
 float: left; /* Customize left/right */ 
 margin-right:10px; /* Customize margin-left/margin-right */ 
 display: block; 
 padding:4px;
}

Customize the Float and Margin properties according to your need.