Add Pinterest Follow Me & Pin It Button for Blogger

Today we provide you how to Add Pinterest Follow Me & Pin It Button for Blogger blog easily. This pin it button allows your visitors to share your posts on Pinterest. Its pulls all images when your reader click on pin it button and choose images which one they pin on Pinterest. Pin it button also counts all pin and displays how many a blog post pinned.

We also provide you code of follow me button for Pinterest to increase your Pinterest followers. This follower buttons takes your readers to your profile page and they will follow your each board individually or follow all boards at one click as they wish.

Add Pinterest Follow Me & Pin It Button For Blogger

Please follow below steps to Add Pinterest Follow Me & Pin It Button for Blogger:

For Pinterest Follow Me Button

Follow below steps to add Pinterest Follow me button on your blogger blog:

Step 1

Go to Blogger account and select your blog which you want to add Pinterest follow me button.

Step 2

Go to Layout and click on Add a Gadget Button as shown in below picture.

Step 3

When you click on Add a Gadget button a popup window will open with all gadgets list. Please select
HTML/JavaScript from Gadgets List as shown in below picture.

Style1

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a><a href="http://haaknews.in/" rel="dofollow" target="_blank" title="news"><img src="http://img1.blogblog.com/img/blank.gif" alt="news" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>

Style2

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a><a href="http://haaknews.in/" rel="dofollow" target="_blank" title="news"><img src="http://img1.blogblog.com/img/blank.gif" alt="news" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a> 

Style3

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a><a href="http://haaknews.in/" rel="dofollow" target="_blank" title="haaknews"><img src="http://img1.blogblog.com/img/blank.gif" alt="news" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a> 

Step 5 
[success headline="Success"]Click on Save Button.[/success]

For Pinterest Pin It Button

Follow below steps to add Pinterest Pin it button on your blogger blog:

[alert headline="Alert!"]Backup your blog template first[/alert]

Step 1

Go to Blogger account and select your blog which you want to add Pinterest Pin It button.

Step 2

Go to Template and Click on Edit HTML button as shown in below picture.

Step 3

Now search below code with the help of CTRL + F:

<data:post.body/>

Step 4

Copy and Paste below code after it:

<!-- Pinterest button Start by BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<a href="http://haaknews.in/" rel="dofollow" target="_blank" title="news"><img src="http://img1.blogblog.com/img/blank.gif" alt="news" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest button End -->

Tips For Button placement :  

Position for top of post

• Place the button code before <data:post.body/>

Button alignment 

• Align right: set it to right; 

• Align center: set it to center;

[success headline="Success"]Click on Save Button.[/success]