Create A Customized Hovering Pinterest Button

16 January 2013


You may have noticed over the past week that there is a new addition on the blog!

Now, whenever you hover your mouse over a picture in a Wifessionals' post, a Pinterest button appears.

I tried many different "Pin It" options for the blog, but this was, by far, my favorite. It's clean looking and only appears when you hover. That means there aren't 1,000 "Pin It" buttons everywhere.

A lot of you emailed me when you noticed the change, asking me to explain how I did this.
You ask, I answer!


The Button

Go to your Blogger dashboard and click Template - - - > Edit HTML - - - > Proceed
CTRL + F or Command + F to find
near the end of your template.


Paste this code above

It looks like this:


Click "Save Template" & "Close".
Go look at your blog!!!


***If it does not work, try pasting the code from this webpage. It is almost the exact same code, however we have discovered that depending where you copy and paste the code from, it can make the button work or not work...it's weird, I know...you can also try pasting it from here.


Now if you want to be a fancy pants like me, you can change the button to any image you want!
Most likely you will want to stick with the Pinterest "P", but maybe you want to change the color like I did?

Here's how!


Customize Your Button:

Save this image to your computer.


Go to PicMonkey.com and upload a blank swatch of the background you want to use. I chose:


Once you upload it, crop it into a perfect square. Then select "Frames" and "Rounded Corners".
Slide the "Corner Radius" knob all the way to the right & click "Transparent Corners".
This should give you a perfect circle.
Go to "Basic Edits" and click "Resize".
Make sure "Keep Proportions" is checked and changed the dimensions to 75 x 75.
Go to "Overlays" & click "Your Own".
Upload the "P" that you saved above.
Use the colorpicker to choose what you would like your "P" to look like.
Move and resize your "P" until you are satisfied, and then save the image as a .png on your computer.


Here is what mine looks like:



Once you save it, upload it to the photosharing website you use.
Get the direct link and go paste it in place of the yellow highlighted code above.
Make sure you leave the quotation marks before and after!!!!

Save your HTML template and enjoy!!!


"Change can change your life. You'll never know unless you embrace it."
Check out more from my biffle's life:

41 comments:

  1. This is wonderful! Can't wait to try it on my blog this weekend! :)

    ReplyDelete
    Replies
    1. Hi Everyone! I did some research on why this code does not work for some people.

      First of all, it doesn't work with Dynamic Views. I use the Simple template, but after googling, I discovered this code may not work on other templates.

      Secondly, if you can't get the widget to work or are getting an error, the first thing you need to do is remove this chunk of code (i had to add the * before 'script' so i could post this...ignore the *):

      <*script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

      Save your HTML template and re-try then. That code above is used for various "jQuery" widgets. It may already be installed in your template so that's why deleting that line and re-saving may help.

      I had a ton of girls try it today and it worked for them, so chances are, it may be one of the 2 issues I listed above!

      Kaitlyn (:

      Delete
    2. AND no breaks between the html code and the <*/body>.

      It has to be:

      html code
      <*/body>

      not

      html code

      <*/body>

      (again, ignore the *)

      Delete
  2. this is a seriously great tutorial!! thanks for sharing!

    ReplyDelete
  3. Thanks for sharing this! Looking forward to adding it to my page.

    ReplyDelete
  4. This is great. I haven't really gotten into Pinterest yet (shocking I know!) but I've been wanting to try and make my own social media buttons but haven't known where to start and now I can just adapt this, thanks so much!

    ReplyDelete
  5. Thanks so much. I totally just did it, and it looks great!

    ReplyDelete
  6. HA! I've been wondering how you did that! Smart cookie! Thanks for sharing this Kaitlyn!!!

    ReplyDelete
  7. Umm, genious! Thanks so much - already did mine and it was so simple with your directions.

    ReplyDelete
  8. This is great!! Thanks for sharing!!

    ReplyDelete
  9. That is a genius idea! I have tried several "how to's" and haven't found one I like! Thanks!

    ReplyDelete
  10. See... you're amazing. Does it not work on pictures uploaded from Photobucket though? I did this, but it didn't work to hover. Hmm...

    ReplyDelete
  11. Okay so I tried this and my template did something crazy and said fix back link so I hit cancel because I got scared haha. Maybe I need to ask my designer! Great tutorial though.. very easy to follow :)

    ReplyDelete
  12. I "pinned" your pin-it button. Now I am giggling with the irony. :)

    ReplyDelete
  13. Hye lady I tried this and it is giving me an error Why it no love me!?

    ReplyDelete
    Replies
    1. Make sure you do not have the Dynamic Views layout. It will not work with that!

      Delete
  14. Hi Everyone! I did some research on why this code does not work for some people.

    First of all, it doesn't work with Dynamic Views. I use the Simple template, but after googling, I discovered this code may not work on other templates.

    Secondly, if you can't get the widget to work or are getting an error, the first thing you need to do is remove this chunk of code (i had to add the * before 'script' so i could post this...ignore the *):

    <*script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

    Save your HTML template and re-try then. That code above is used for various "jQuery" widgets. It may already be installed in your template so that's why deleting that line and re-saving may help.

    I had a ton of girls try it today and it worked for them, so chances are, it may be one of the 2 issues I listed above!

    Kaitlyn (:

    ReplyDelete
    Replies
    1. GOT IT!!! Two things: no breaks between the html code and the /body. It has to be:

      html code
      /body

      not

      html code

      /body

      Also, I was using the HTML code for the image on photobucket when you have to use the DIRECT link. WOO!

      Thanks for the help, pretty lady!

      Delete
  15. I just did a tutorial of how to do this a few days ago after seeing the hover button on your blog! I was like, "I have got to find out how she did that!". Haha, I should have just waited a few days for your tutorial. :)

    ReplyDelete
  16. It takes time to figure this stuff out and time to create the tutorial...it's so awesome that you share the 'deets on blogging tricks/tips!

    ReplyDelete
  17. Awesome, I did this a few days ago from a different tutorial but they didn't show how to change the color or anything. The stark red just doesn't do it for me. Thanks so much for posting all the details!

    ReplyDelete
  18. Ahhhhhh, I have tried this SO many times to get it to work, I really don't know why it won't work and I am pretty ok with HTML, please could you help? I have the awesome inc template so it should be fine and I have tried it with the jquery line and also tried removing it, it still won't work!! :(

    ReplyDelete
  19. It didn't work for me either, even after reading through all your suggestions in the comment box. :(

    ReplyDelete
    Replies
    1. I added this part in the post "***If it does not work, try pasting the code from this webpage...."

      Try copying & pasting from those links. We found out that depending where you copy and paste from it can suddenly make it work (:

      Delete
  20. thanks for this! when I did this, it worked! but it says lord.html when you hover - how do you change that? any help is appreciated!!

    ReplyDelete
  21. Hey girl! So I have tried doing this pin it button again and again and I've tried all the additional tips you gave in the comments and still nothing :( And I checked my layout and I'm using the simple layout. I don't know what is going on.

    ReplyDelete
  22. Great tutorial! Love it! Super easy!

    ReplyDelete
  23. Totally just added this, I had this post bookmarked since you wrote it and knew I would use it some day. Just FYI, the code in the box you have in the post is outdated, they have since updated the code on the site you linked to. I just had to go there, they made a couple adjustments to errors people were getting. Anyway, YOU ARE AWESOME for writing this, I am keeping it bookmarked.

    Just wanted to give you a "hey thanks!" for being one of my blogging experts!

    xoxo,
    Gayle | Grace for Gayle

    ReplyDelete
  24. would you happen to know if you have to click "revert changes"? I've tried this so many times and it doesn't seem to work.
    any help is greatly appreciated.
    thanks
    Jessica

    ReplyDelete
    Replies
    1. Try this:

      http://www.carolinafireflies.com/2013/02/adding-pin-it-button-to-your-blog.html

      Delete
  25. Has anyone else not been able to locate "body" within the HTML even with using the Control F function? I am trying to add this into my template and becoming quite frustrated!

    ReplyDelete
  26. I did it :) wow I feel so smart! Thanks for the step by step!

    ReplyDelete
  27. THAT'S HOW YOU DO CIRCLES IN PIC MONKEY!! BRILLIANT!!
    haha thank you so much ;)

    ReplyDelete
  28. THANK YOU~~ I have been trying to figure this out for MONTHS!!!!

    atparsons.blogspot.com

    ReplyDelete
  29. Oh my gosh - amazing! Thanks so much!!

    ReplyDelete
  30. ROCKIN' tutorial! You've gotta see the custom button I made. I amuse myself. :D
    Thanks for the great post!
    Kathy Shea Mormino
    The Chicken Chick
    http://www.The-Chicken-Chick.com

    ReplyDelete

Note: Only a member of this blog may post a comment.

Proudly designed by Mlekoshi playground
09 10