Follow my renovations on Instagram.

How to add the Pin it hover button to your blog images

Hi there! Today I thought I would quickly show you how to add the PINTEREST hover button to your images on your blog.

Normally I am giving you pretty pictures and fun stuff, so click off here today if you’re not into my geeky stuff. I needed a geek fix haha! I have been very busy creating tutorials over here, so I thought I should share at least one with you!

I’ll show you how to do it for a blog and a blog.


First, you need a cute Pinterest image (or you can use the standard one too!).

You can right click these images and save to your own hosting account (like photobucket or your own blog), or click on the actual image to grab the URL. I’ll show you more in the short video below.

pinit8 pinit7
pinit6 pinit5 pinit3 pinit2 pinit1
pinterest-icon (2) pinterest-icon (1) 64_round_pinlove

Instructions for Blog.

1. Grab this piece of code below.

{This is not my code, I borrowed it from HERE, so if you are having trouble grabbing the code, please visit Blogger Sentral to grab it from there}.

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.


2. Go to your blogger template > Edit HTML

3. Find the </body> tag at the bottom of your template and insert the code ABOVE it.

4. To use your own button replace the code in RED with the url of your new button. Watch the video on how to find this.

5. To change the position of the button change the GREEN word to:

  • topleft, topright
  • bottomright, bottomleft

6. Save.


Instructions for a Blog.

This one is really simple because there is a plugin already built for you to use!

1. Visit Pinterest Pin it Button for images.

2. Download the plugin and install it on your blog.

3. Go to your Settings, find the Pinterest Pin it tab and set whatever you like in that page.

4. If you want a customised image for the blog, this is a little trickier. Watch the video below to see what needs to be changed (the image file and the sizing). If you find this hard to follow, the plugin still has a nice Pinterest image for you! {Note, I got the size a little wrong in the video and chopped my pin it button off a fraction, but it is easy fixed, just make sure you add the correct size when altering the file 🙂}

Happy Pinning! X


  • Maxabella

    Thanks Kat, I’m in!

  • Usua Manero

    Thank you very much!
    I have a queston,
    How do you add the button to every image on a blog post.
    I can’t figure it out 🙁

  • Trina Gaines

    You Rock! Thanks!!!!!!!!!!!!!!

  • Jokko

    Thanks a lot!!!! IT WORKS :-))))) Great tutorial!

  • Ashlea

    Hi Katrina, I am trying to figure out how to disable the pint it button on certain images. I am using Blogger, not wordpress. Do you know how to do this? 🙂

  • ya_maya

    super described, thanx

  • Lynn

    Thank you so much!!

  • stanky Kdeeep

    Thanku… for Lovely Design That’s where i use this.. 🙂


    Thank you so much for posting this! It was extremely helpful and made it easy to add the Pinit button to our blog.

  • Riikka / KOTILA

    Hi Katrina,
    Thank you so much for this post, I translated your instructions into Finnish and added a link back to your blog!

    Love, Riikka from Finland

Leave a Reply

Your email address will not be published. Required fields are marked *