Adding Pin It Button hover to blogger

As you know that, picture play a great rule in attracting new visitors throuth search engine like google and other search engine platform. But since Pinterest deside to enter the social media, it upped the ante in the great way. Pinterest button is the button that appear on the image whey you move the mouse pointer over the image on your post.

Person who click on your pin button on the image in your blog now they can see your image on their Pinterst Dashboard, and they will share to their friends or followers on the service. More importantly, that the image will link to your blog/web when they click on. Another point is that, it will definetly help you to generate new traffic to your site.

1 Adding Pin button Javascript to Blogger template

First things, you have to back up your template protect from missing and error some element.

Now, let pay attention to the tutorial

You can do this by logging to blogger dashboard and go to template, opening the search box and the </body> tags.

</body>

Once you have find the </body>, just above it past the follwing code:

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjMpuQkFGV_CvtYfRjGd56bMJCWzz1umVK_VRYZZDG4HPR3qEJBZD85-fBt2seitbVHySD02H8xLn6rFUbzuyuqHzPy95qNLrbxQh_xLATkGISJLy2j9HvBREXAOdQhYM32uIvgIrZo9h/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script id='pinit-img-button' src='https://cambohelpbloggers.googlecode.com/svn/trunk/pinterest button.js' type='text/javascript'> 
// Visit cambohelpblogger.blogspot.com for more widgets and tricks.
</script>

+Note

1- If you wish to change the position of pin button, just folow the step below:

Where it say "center", you can change with the following:

topright
topleft
bottomright
bottomleft

 2- You can also change the image button with your own, just replace the following image address

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjMpuQkFGV_CvtYfRjGd56bMJCWzz1umVK_VRYZZDG4HPR3qEJBZD85-fBt2seitbVHySD02H8xLn6rFUbzuyuqHzPy95qNLrbxQh_xLATkGISJLy2j9HvBREXAOdQhYM32uIvgIrZo9h/s1600/pinit-button.png

Now you will see the pin it button on every image in your post. Make sure don't miss any step and don't change the element of the code except the button position and image address.

2 Remove Pin it button from specific image

If you don't want to show pint it button on some imgaes, go to your post and switch to HTML tab to edit the code. Find the image address and type class=''nopin'' before the closing slash like this:

Last thing save your template.

Enjoy!