1:13:00 PM
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 BloggerSentral.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>
<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.
No comments
Post a Comment