Create a Custom PINTEREST hover button in Blogger Images

Last post on Blogger was on how to create social media icons for your blogger sidebar. You can view the tutorial here. Today is gonna be another fun tutorial to add an extra touch to your blog images so that readers can easily Pin the images they like to their Pinterest Board. (And believe me, this one is real useful to me as well, as I directly pin my images using this).

I'l walk you through these simple steps on how to create your own customized Pin-it Hover button for your blogger images.

1. Go to PicMonkey. Select Design. You can select either Square or Custom for the canvas.

2. Enter the size for the canvas. I am going keep mine as 80 px x 80 px and then crop if its big.

3. Set the canvas as 'Transparent'.

4. Enter any overlay you want or add your own. Change its color or size.

5. Add the text 'Pin it' or 'Pin me' or anything you like. :)

6. Save the image as .png (very very important)

7. Upload your image to image hosting website like Photobucket. Copy the URL.

8. Now go to your Blogger Dashboard -->  Template --> Edit HTML

9. Click onto the coding part and select CTRL + F (Find) then search for </body>

10. Once you locate the </body> add the following code above this:

<script>

//<![CDATA[

var bs_pinButtonURL = "your pin it image URL.png";

var bs_pinButtonPos = "center";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

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

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

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.

</script>

NOTE: 

• Replace the red portion with the image URL
• Blue portion with the alignment options: topleft, topright, bottomleft, bottomright, center (default state)

11. Click Save Template. now write a blog post with an image and publish it.

12. View your blog / post and hover over the image to see the 'Pin-it' button

13. Try with other alignment options if you want the button elsewhere. (the below image alignment for pin-it button is top-left)

14. And YEAH !!!! You now have your own customized Pin-it hover button for your blog images. :) Jump with Joy :) 

Make any shape or style you want to match your blog theme and enjoy :)