How to add "Pin it" button on Each Image of a Blog Post

Hey guys, it's been a long time since I ever posted a blogger tip. You've probably noticed 

a pin it button (bottom right side of each image) that appears when you hover on any image 

within my posts. It's a very helpful widget, cause it's easier for your readers to pin the image 

they want without having to scroll down. Today, I'm gonna share with you how I added that 

button with the help of those great guys. It's an easy-peasy tutorial. So here we go:

Step 1:

Blogger: Go to Template > Edit HTML > Expand HTML

Wordpress: Go to Administration > Appearance > Editor > footer.php.

Step 2:

Locate the  </body> tag near the bottom of the template

Step 3:

Copy the code you see here-below and paste it right above the </body> tag.

01

<script>

02	//<![CDATA[

03	var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";

04	var bs_pinButtonPos = "center";

05

//]]>

06

</script>

07	<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js 'type='text/javascript'></script>

08	<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js 'type='text/javascript'></script>

09	<!-- please do not alter or remove the following code -->

10	<div id='bs_pinOnHover'><ahref="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

Tips:

- You can choose any button icon you prefer. Find free pin it icons: here here here
- To use your own button, replace the URL in line 3 with the link URL of the image you've chosen. Make sure to keep the quotes.
- To re-position the button, replace center in line 3 with the new position as written below:

• topleft
• topright
• bottomleft
• bottomright

Preview your blog and you should now be able to see the pin it button where you have 
placed it to be. Hit "Save" button and you're all set!
Enjoy endless pinning!

 

Thanks for Making This Possible! Spread The Word!

Pin It