About   /   Contact   /   Sponsor   /   Blog + Web Design

March 1, 2013

how to: make a 'pin it' button appear on hover over images on your blog

hover over this image and pin it to see it in action & spread the word!

I just recently discovered the trend going around the internet of bloggers having a 'pin it' button appear when you hover over their images. How cool!! I loved it so much I made my own custom Pin button to add my to images that matches my blog design.

Today I am going to share with y'all in real girl (non-techie) terms how to add this glorious site traffic boosting button to your Blogger site!

Step 1 / / Click 'Template' --- Back up your template. Always. (click the button in the top right corner to download the entire template)

Step 2 / / Choose "edit HTML" --- click anywhere within the HTML, then and press Command+F (mac) or CTRL+F (PC) to bring up the search bar!

So handy! Now in the search bar type </body> and find that pretty little chunk of code. The finder should highlight it automatically for you :)

Step 3 / / Now ABOVE THAT (above the highlighted </body>) copy and paste the following code:

BOOM! And there is your Pin It button! Now, before you save it you will probably want to tweak it a little and here are your ONLY options for changing the code (if you change anything else it wont work):

/ / Option 1 : If you want to change the location of the button on your image, change where it says "center" to one of the following options:

/ / Option 2 : If you want to change the image that pops up, you can just substitute in your own image link where it says pinButtonURL = "

Pinterest provides a image few options here. But I just chose to make my own and upload the image to photobucket to get a link :)

Step 4 / / Click Preview. You wont be able to see anything (aka the pin it button) but if everything looks normal then you put the coding in the right place and it isnt affecting any of the other coding in your template!


Step 6 / / View your blog, admire your work, and pin this blog post to help spread the word!

TIP: To block the icon from certain images, add the "nopin" class to the image.
For example:
<img class="nopin" src="www.whit.com/imagehere">

/ / / / If you used this code on your blog please link up in the comments section so we can see it in action!
/ / / / Confused? Feel free to comment your question so I or another reader can help you out!

Happy blogging!


  1. YOU are THE BEST, Whitney! Thank you so so much! :)


  2. O this is so great! I've been thinking about doing this actually! by the way I love you blog! I think its pretty great! haha. I can't wait to read more from you!

    Your Newest Follower,

    p.s.-I'm from nc too! I actually just started a NC Bloggers link up page and I'd love if you'd add your lovely blog link to the list, I think I would make a great addition to the local nc blogger collection!


    Happy Weekend!

  3. Do we post the code that says do not alter or remove?

    1. yep! post it all :) keeping that gives the credit to the site who created the code!

  4. Got it working and love it!

  5. So neat, using it on my blog now ♡

  6. Thank you so much for the awesome tutorial! love it


  7. I added these to my blog a while ago, but for whatever reason they didn't work quite right. Now I added your code and it looks great! Thanks so much for the easy steps and code to copy. :)

  8. YOU. ROCK . IT. - Thank you ever so!

  9. YES! I have been doing Google searching for this! Just found you through Southern Blog Society. Code is working wonderfully! Thanks! I'll be following. My Love-Lee Life Blog at sarahkaylee.blogspot.com

  10. hey, your tutorial is very helpful. the button you use is a circle and i created one myself in PSE and saved it as png. but every time i upload it on flickr to use it in your code i get a jpg file with a sqare format and a white background. but i want one similar to yours. how did you do it?
    thx very much, julia

  11. This was the best tutorial I've found for anything technical! Thanks so much!

  12. Great...thank you for this tutorial!

  13. What a fab tutorial. Thanks for sharing!! Added it to my blog now :)

    Jen | sunny sweet pea xx

  14. Yay! My template makes it looks a bit out of whack (read: huge!) on my homepage, but it is currently doing that with all my pictures - something I need to fix. BUT it looks awesome on the individual post pages. Also, thanks for telling us that it won't show up in preview. :)


  15. WOW! So glad I stumbled upon this. Perfect directions, works great. I'm definitely sharing your post with my readers soon!

    Now following via GFC and Twitter.

    Take care,
    Happy Kids, Inc

  16. Thank you!!!!



  17. Hey! Thanks for this! I've added it to my blog. I tried to upload my own image to pop up but it didn't seem to work... However I now have a pin-it button so I'm happy :) THANK YOU!


  18. You are the best! Thanks SOO much! I've looked all over for a good tutorial! Do you know where I could get a cute pink hover image like yours? I tried making one but I'm terrible w/ photoshop!

  19. Thanks for the rad tutorial! I've been trying to do this for hours, before I found your blog!! Thank you, thank you!!

  20. Help me please! Ok so I have a CSS rule saved to my template to make all my images the same width. And when I post the code into 'Edit HTML,' the rule unfortunately applies to the pin it button, making it extremely large and pixelated. I was wondering if there is some kind of code I can put somewhere to make the pin-it button an exception to this CSS rule? I'd really love to have the pin-it button, but don't want to have to sacrifice the unified size of all my pictures! :(

    I would really appreciate your help with this!


    Ashley via thefashionwonderlust.blogspot.com

  21. engquist@see what i sea designJune 19, 2013 at 11:00 AM

    Thank you thank you thank you! I've been wanting to do something like this for ages but had no idea how to do it! You're wonderful!!

  22. Thank you so much! I feel like I'm so behind the times, so I really appreciate any technology tutorial.

    The Traveling Teacher


  23. OMG! I am so glad this worked!!!!!!Thanks you so much!

  24. I keep trying this code but nothing is changing on my blog. Any ideas what I might be doing wrong? I know that isn't very specific, but I'm not sure what else to say! Thanks!


  25. whoops looks like I was just being impatient and not waiting for the page to load completely! It's not working, thanks so much for sharing the code!

  26. This is SO COOL....thank you thank you for sharing the steps. Super easy to do! :)

  27. Oh, and I forgot to mention....I wrote a quickie blog post about this, linking it back to your post. Sharing a little blog love. :)

  28. Emelie@florainspiroJuly 28, 2013 at 11:20 AM

    Thanks for sharing this! It works just so good ;)
    // Emelie

  29. RoseMarie MassaroJuly 28, 2013 at 6:11 PM

    I just updated my blog to include all the social media engagement tools and used this -- thanks so much -- worked great! find me at http://homeconfetti.blogspot.com

  30. Thanks SO much! I'm so excited about this ... and will be making my own soon (using that handy dandy photo bucket/link trick as well).
    So helpful!

  31. Great! Any way to add it on any regular website with more social buttons?

  32. Took me a few tries, but finally got it! Thank you so much! So Helpful!

  33. Adeola Naomi AderemiAugust 24, 2013 at 7:37 PM

    Thank you so much! Super easy and simplified.

    See it in action on my blog here: http://distinguisheddiva.blogspot.gr/

  34. Thanks girl!
    Check out the finished product:


  35. Oh my gosh this is so dang helpful! Definitely doing this soon!

  36. TheCluelessWoman@blogspot.comJanuary 14, 2014 at 2:13 AM

    Thank you so much!! I appreciate this!

  37. Well, that worked so slick! Thank you. I am not a very dedicated blogger and have made the decision to either step it up and get more "bloggy" or just ditch it altogether. Since your tute for addding the pin button was a success, I have hope that my blog has potential! Thanks again!


Hello friend! I love comments & read (and attempt) to respond to everyone! Thank you so much for stopping by Whitney Blake xx