How to Add Pinterest Pin Button to all Images in Blogger?

Views:

Pinterest is an online image sharing community which can drive huge traffic to your blog just by sharing your blog posts images. I know you are thinking that Pinterest has no more popularity than Facebook and Twitter but Pinterest can gets you more traffic than any social media. So we have to put Pin Button to our blog posts images so that our visitors can pin the images to Pinterest.

 I brought a great way to all pin button to all blogger posts images at once. When we scroll our mouse pointer to the image then it shows a hover effect with Pinterest Pin Button. So lets start rolling your fingers on the tutorial.

Steps to Add:

• Go to Blogger Dashboard in your blogger account.

• Click on the Edit HTML button to extract your blog template.

• Search for </body> using Ctrl+F.

• Copy the following code and paste the code above it.
• 
  

/*Pin button by mybloggerbuzz.com*/

<script>

//<![CDATA[

var bs_pinButtonURL= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZacR9T1h6PqB-L-OC1p9DwEiA42iz6kb-tsQjG-zlL7tZMxaVmdGVQgncD6TurGgjd9rqjnzygumYC0YJla-_UreLHkhRsyHO39z_ePXZMRQb1kkeByh-2SoR3Jq6Slgj0lnI8u936v9/h120/mybloggerbuzz-pin.png";

var bs_pinButtonPos = "center";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

<script id='bs_pinOnHover' src='https://trickstoo-pin.googlecode.com/svn/pin-button.js' type='text/javascript'>

</script>

• You almost done!

Note: 

• If your template had already loaded with the jquery library file, leave the coding which is highlighted with red color before adding it to your blog.
• You can change the position of the hover pinterest button on the image by replacing center with any of the following one. 

• Topright
• Bottomright
• Topleft
• Bottomleft

• Change the pin button image by replacing above colored url with url of your reference image.

• You can add some text above or below all the images by adding your text here. 

For prefix - var bs_pinPrefix = "insert your prefix text here"

For suffix - var bs_pinSuffix = "insert your suffix text here"

Step 5: Click on Save template button.

Additional to that, If you want to exclude or block any of the image in your blog, use the following code.

<div class="nopin">

Place Your Image Tags Here </div> 

That's the simple tutorial to add the Pin buttons to all Blogger posts images. Feel free to comment below and share your experience with us till then Peace, Blessings and Happy Pinning.