New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Pinterest Pin It button on image hover


Hello buddies! I know you are waiting for my next  article since  in the last few days I was busy in my teaching profession but don't worry because  starting today  I  will try to update my blog more regurly. Today, I will share to you a very nice SEO tip for every blogger to their blog traffic and gain brand exposure and this is all about adding pinterest pin it button to all blog images. Have a mouse hover with image below for a live demo.
add pinterest pin it button

Adding Pinterest Pin It Button on Image Hover


Step 1.  Go to Blogger  Dashboard >> Template >> Edit HTML
Step 2. Locate the code below,
</body>
Step 3. Just above the code in step 2, paste the following code,
<script>
//<![CDATA[
var custom_pinit_button = "http://1.bp.blogspot.com/-HjTDfvaNZFI/VEN1AcG4DfI/AAAAAAAACrM/NPVypMtIqcs/s1600/pinterest-icon.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 id='pinit-img-button' src='http://bloggingtipsandtrix.googlecode.com/svn/trunk/script/pinterest.js' type='text/javascript'>
//  Please visit Bloggingtipsandtrix.blogspot.com for more widgets and tricks.
</script>


Step 4. Save your Template and you are done!

Customiztion:
  • To change the position or location of the pinterest button just replace the red bolded text "center"with topleft, topright, bottomright or bottom left.
  • And to change the Pin it button that appears when mouse hover on it, replace the image link in orange bold text above with your own Pin It button image link or URL.
  • You can also see some available url of Pinterest Icon here.
  •  If you want to disable this in one of your specific images, just go to your specific post and switch it HTML mode and locate the image element and type class="nopin" right before the closing slash and angle bracket as shown in the image below.

That's all buddies! Enjoy!
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...