Blogger Tutorial

Add Pin it Button to WordPres and Blogger Blog

This tutorial based on bloggerscentral.com site. Many thanks to them for producing wonderful tutorial about this. Infact they're the one giving this wonderful code for Pinterest Button. This tutorial teaches you how to add pinterest button to your blogger blog as well as your wordpress blog with ease. 

Following these steps you can easily add this pinterest button almost within 5 minutes and you will see the live demo in this website home page and as well as in the post pages of this site. See the below image how it will appear in your post pages. (Pinterest Button on the image)

Add Pinterest Button to Blogger

Features of Pinterest Button

It can be auto picked the title of your post and it's doesn't matter whether you're sharing from the post page or from the home page. Auto fill the title of the post in the description box Now it's tutorial time. I now show you how to add this pinterest button to your blogger blog.

How to Insert Pinterest Button in Blogger Blog

1. Go to Blogger.com, Select any blog for this..
2. Go to Blogger Dashboard, Select Template, Click Edit.
3. Then Click (CTR+F) to find out </body> tag. This tag always locate at the bottom of the page. So you need not worry to find out this tag. Now copy and paste the below code and paste it exactly above the </body> tag. Now Click Save Changes. That's it. You've done.

How to Insert Pinterest Button to your WordPress Blog

1. Go to WordPress Admin >> Appearance >> Footer.php 
2. Locate </body> tag
3. Copy and Paste the below the code exactly above the </body> tag and click save changes. That's it.

Below is the code :

var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
Copy and Paste this code.  
Now we move to next blogger tutorial.

Next: Chapter :7 : HTML Sitemap Generator for Blogger

Post a Comment