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:
topright
topleft
bottomright
bottomleft

/ / 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 5 / / SAVE THAT BAD BOY!

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!



45 comments:

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

    xo
    http://hautecouture3.blogspot.com

    ReplyDelete
  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,
    Hannah
    http://thirstyworlddesigns.blogspot.com


    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!

    http://thirstyworlddesigns.blogspot.com/p/north-carolina-bloggers.html

    Happy Weekend!

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

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

      Delete
  4. Got it working and love it!
    thislittleblonde.blogspot.com

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

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

    www.ellen-loves.blogspot.com

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

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

    ReplyDelete
  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

    ReplyDelete
  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

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

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

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

    Jen | sunny sweet pea xx

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

    www.abbytalsma.com

    ReplyDelete
  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,
    Meg
    Happy Kids, Inc

    ReplyDelete
  16. Thank you!!!!

    www.alifeinthefashionlane.com

    xo

    ReplyDelete
  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!

    http://redlovinpixie.blogspot.com

    ReplyDelete
  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!

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

    ReplyDelete
  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!

    Thanks,

    Ashley via thefashionwonderlust.blogspot.com

    ReplyDelete
  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!!

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

    The Traveling Teacher

    http://thetravelingthirdgradeteacher.blogspot.com

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

    ReplyDelete
  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!


    www.sarahlibros.blogspot.com

    ReplyDelete
  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!

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

    ReplyDelete
  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. :)
    www.myowntwistonthings.blogspot.com

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

    Thanks for sharing this! It works just so good ;)
    // Emelie
    http://www.blog.florainspiro.com/

    ReplyDelete
  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

    ReplyDelete
  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!
    www.strawberrymohawk.com

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

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

    ReplyDelete
  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/

    ReplyDelete
  34. Thanks girl!
    Check out the finished product:

    http://bigfatcopycat.blogspot.com

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

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

    Thank you so much!! I appreciate this!

    ReplyDelete
  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!

    ReplyDelete

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