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.
Step 4
Select your Style and Copy & Paste below code in HTML/JavaScript text box. Also replace USERNAME with your Pinterest username:
Style 1
<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://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
Style 2
<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://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
Style 3
<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://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
Step 5
Click on Save Button.
For Pinterest Pin It Button
Follow below steps to add Pinterest Pin it button on your blogger blog:
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 sharetoworld.com -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" 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;
- Align center: set it to center;
Step 5
Click on Save Button.
Post a Comment