How to Add Pinterest Pin It button on Image Hover

byXiang Hong - 0 تعليقات

Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way.

Pinterest lets blog owners use their service to add a "pint" to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.

The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or folloers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.

Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your own Pinterest button.

1- Go to your Blogger Dashboard

2- Go to Template  >>  Edit HTML

3- In the HTML code box, press Ctrl + F then type
</body>
4- Now paste below code just above </body>
<script>
//<![CDATA[
var custom_pint_button="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzDcRIAUfS8Ua5YHjEWOYyXOcGPGNfeleZyHp3Diu77dyD6-e_NBnX69wPsPKBA4QSAYB_XGNmMlFJ8FcjoQ1HfqvLVmblgheeclJbClRupSkh7UHznheAYPd4lycdBZ91fpyoYTADh4/s1600/pinterest.png";
var pint_button_position="center";
var pint_button_before="";
var pint_button_after="";
//]]>
</sripts>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs-pin0nHover' scr='http://greenlava-code-googlecode.com/svn/trunk/publicscripts/bs_pin0Hoverv1_min.js' type='text/javascripts'>
//How to Add Pinterest Pin It button on Image Hover is brought to you by sharetoworld.com
</script>
Note: 
  • To use your own button, replace the URL in RED color
  • To change the position of the Pin it! button, replace "center" in blue color with the new position as listed below:
    • topleft
    • topright
    • bottomleft
    • bottomright

5- Save template

Note:
  • If you want to hide the pint it button from a specific image, when you create a post, switch to the HTML tab of your post editor and type class='nopin' right before the closing slash and angle bracket of your image element, like this:


That's it!
Don't forget to share this awesome tip to your friends by clicking sharing buttons below.

Post a Comment

إرسال تعليق

أحدث أقدم