Adding Customized Pinterest “Image Hover Pin-it Button” for Blogger

Earlier we have discussed about many social sharing widgets for blogger. So the only purpose of adding all on your blog is to increase your web traffic via popular social networking sites. Now in this tutorial I’m with another sharing tool available for blogger. So by taking a look at the title of this post you might have got some idea on it.

Adding Customized Pinterest "Image Hover Pin-it Button" for Blogger

Pinterest is one among the popular social networking websites. In Facebook everyone put some likes for status, photos and videos. But in Pinterest, we need to Pin it which is nothing but sharing with others. Mostly images can be pinned on their Pinterest Pin Board & even it can be re-pinned by your known friends too. Like Twitter here also your Pin Board will have followers. So after publishing your blog post then just try to share the images on Pinterest and wait for sometimes. Gone Viral…? So to make other to do the same, you need to add some easy tool for Pin It on Pinterest. If you don’t have before, don’t worry! This tutorial will guide you to add Pinterest Pin It Button on Image Mouseover effect. The best part with this is, this awesome tool is totally free to use.

Check this: Dsquare Floating Share Bars With Social Media Buttons 

Such tools will seen only on professional blogs. But now it is possible to add on your blog too! Lets check out how to Pinterest “Pin it” Button for Blogger Images in quick steps,

Pinterest “Pin it” Hover Button for Blogger Images

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

Step 2: Then find </body> tag on your template. Once you find it Add the below script Above/Before </body> tag,

 <script>
//<![CDATA[
var custom_pinit_button = “http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-
button.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=’https://triposoft.googlecode.com/svn/pin-it’
type=’text/javascript’>
</script>

Step 3: Hope you’ve added successfully! Now its time to customize the location for the Pin button to be shown-up on blogger images. So to choose the position you need to make some changes in the added script. In it you can find a line ,

 var pinit_button_position = “center”;

Step 4: Just change the “Center” with one of the these texts given below,

topleft
topright
bottomleft
bottomright

Step 5: Now to change the Pin it button style you need to replace the image URL with your own. If you don’t have any image for it, then visit here and download your own customized Pin it Button for Blogger Images. [Link]

Adding Customized Pinterest "Image Hover Pin-it Button" for Blogger

Step 6: Once you downloaded, just upload it on blogger and copy the Image URL of it. Then replace the old image URL with your new one.

Step 7: So after making all changes, Save your Template and check your blog. Cool;)

Another thing, if you don’t want to hide Pin It button for some images then while creating a post switch to HTML tab and type Class=”nopin” just before the closing tag of your image element. That’s it!

Does it works on your blog? If you’re facing any issues then drop them in comments! Do likes and share this post with your friends too. Peace Blogging;)

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.