How To Add A Custom Pin It Button On Image Hover

3:00 PM

Hello! Today I am going to do a requested tutorial on how to add a custom pin it button on image hover. :)


1. Log in to your blogger account and select the blog you'd like to add your pin it button to.

2. Go to Template >> Edit HTML and locate the </body> tag.

3. Copy the code below, and place it directly above the tag.

+ + +

var bs_pinButtonURL = "";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
<script src='' type='text/javascript'></script>
<script id='bs_pinOnHover' src='' type='text/javascript'>
// This Pinterest Hover Button is brought to you by
// Visit for details.
// Feel free to use and share, but please keep this notice intact.

+ + +

To reposition your pin it button, replace center with:

+ topleft
+ topright
+ bottomleft
+ bottomright

4. Save your template and tada! You've got a hovering pinterest button. To customize this, change the image URL in the code (I've colored it red), and replace it with one of your choice. Here's a freebie code, for a pinterest button that may better suit your blog:

Image:  photo 5a3e610d-abfa-406f-99d7-94ba48ba74f6_zpse715a625.png


Alright, well, I believe that's all for now! :) If you have any questions and/or concerns, just comment below! I'm happy to help.

You Might Also Like

2 Sweet Notes

  1. Thank you so much for this tutorial! I can't wait to use this on my blog :)


  2. I just added this to my blog, thanks for writing this post!


All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose