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]
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;)