6.25.2015

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).

Create a Custom PINTEREST hover button on images in Blogger


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.

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


3. Set the canvas as 'Transparent'.

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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>


Create a Custom PINTEREST hover button on images in Blogger


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


Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger


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

Create a Custom PINTEREST hover button on images in Blogger

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

Create a Custom PINTEREST hover button on images in Blogger
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 :) 





1 comment:

  1. This is a wonderful post! Thanks for sharing your knowledge with us!

    ReplyDelete

Thank you for taking time to stop by. I would love if you leave some inspiring comments about the post. To avoid spam and unwanted users from leaving a comment, your comment will be verified and posted in sometime. Thank you :)