Add Pinterest pin it mouse hover button to blogger images

   Pinterest is one of the interesting social media to share our ideas through the world. Here you can save and organize them wherever you want. It is a gallery of images, collections with storage. We can use this social networking media to pin our blogger images which are included in the posts to store and share with others in the world. This facility will helps us to grow our blog or website's traffic in a rapid way.

Pinterest pinit to blogger images

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML.

Step 2: Search the following piece of code by using Ctrl+F.

</body>

Step 3: Paste the below code just above "</body>" tag.

<script>
//<![CDATA[
var custom_pinit_button = "https://lh4.googleusercontent.com/-GhwhNxpLC0A/VOhZe_pgfVI/AAAAAAAAFwI/bu3W1AWrryI/s128/pinterest.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

If the above code not working then try the following code.

<script>
//<![CDATA[
var bs_pinButtonURL = "https://lh4.googleusercontent.com/-GhwhNxpLC0A/VOhZe_pgfVI/AAAAAAAAFwI/bu3W1AWrryI/s128/pinterest.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='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.
</script>

READ

How to add related posts in each Blogger post

Step 4: Now Save Template and now your blogger images will ready to pin.

NOTE: In any case, if you want to Remove Pin it button from specific images then use the following code on the HTML section of the image (shown in screen shot below).

class="nopin"

The following is the example.

• Tweet
• Share
• Share
• Share
• Share