Wednesday, August 27, 2014

DIY: Custom Image Pinterest Hover Button Tutorial



Hey y'all! This post today is for any bloggers or aspiring bloggers that would like to know how to make a custom image Pinterest hover button for your blog images. Before I start, there are two pre-requisites: 1. You must be signed up to use the site Picmonkey 2. You need a Photobucket account. My directions are for Blogger blogs because that's what I happen to be using. This post also comes with a WARNING; making these can will become addictive. Seriously, I made like twenty over the weekend and just couldn't decide which one I wanted on the blog, so I had to try EACH of them out. If you happened to have visited the blog during this switch-a-roo fest, God bless you. And without further ado..........


{just a FEW of the images I made in Picmonkey}

  • Go ahead and open this page in your browser http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html
  • Also open your blogger page
  • Now head on over to Picmonkey.com and get crazy creative. Really play around a little with the images; the possibilities are endless! And because I'm a visual learner, I've made this neat little video to get you through the Picmonkey process {also on YouTube if you want to view a larger screen image just follow this link}



  • Now head over to Photobucket. Upload the image you saved on your computer from Picmonkey and once it's there click on your image. A few "links to share your photo" will show up to the right of your image: click on the one that says 'Direct'. This will copy that link for you.
  • Once you have your link copied, head on over to your bloggersentral.com tab that you've already opened in your browser.
  • Copy and paste the code from bloggersentral somewhere safe. I like to start a new post in Blogger and just save it there for future reference~ just don't ever accidentally click 'publish'! Bloggersentral has very clear instructions on how to change their code if you'd like to insert your own image. And that's just what we want to do!
  • In other words, everything inside the quotation marks {be sure to leave the quotation marks; you are going to insert between them} in line 3, will be erased and replaced with your new image link from Photobucket. Just right click between the quotes {after you delete their jpg image text} and 'paste' in your photobucket link.
  • This new code is your future custom Pinterest hover button. Woot woot!! Highlight and copy ALL of the new code.
  • Now the really easy part; head back over to Blogger and click 'Layout'. 
  • In 'Layout" click 'add a gadget'
  • Scroll down to the add 'HTML/Javascript' and click
  • In the entry box, right click and paste your code
  • Hit 'save' and then 'save arrangement'
  • Are you ready? Hit the view blog button, scroll over an image and marvel at your custom creation! 





{Here's a clip of what my current "pin it" hover button looks like live on my blog. Cool huh?}



Now the really hard part begins..... try not to go crazy and make 20 30 of them which I may or may not have done. Oh boy.....
I hope that this helped y'all out and I'd love to hear from you, so come back and share in the comments what amazing images you created.


Linking At:

13 comments:

  1. Great idea, Thanks for sharing the details!

    ReplyDelete
  2. I bet you made this just for me. lol. Seeing as I told you how I needed specific tutorials on how to do all this neat stuff on the blog. Thanks so much. Hoping you will do more.
    Blessings
    Diane

    ReplyDelete
    Replies
    1. I had so much fun with this one Diane that I'm sure I'll have to do more!!

      Delete
  3. These are so much fun! I love the images you picked. I've pinned it so I can work on it later :)

    ReplyDelete
    Replies
    1. Thanks for visiting Julie and thanks for pinning!!!

      Delete
  4. Oh, your pin it buttons are darling! No wonder you couldn't choose. I am on wordpress but am pinning to see if I can modify for my host! Thank you. Plus, I have to pin to see what button you chose! ;)

    ReplyDelete
    Replies
    1. Oh Elizabeth, thank you so much! I'm just thrilled you could stop by! Good luck on using this on Wordpress!

      Delete
  5. I love all your buttons you created. So very pretty! Can you do a whole blog revamp?...lol. Thanks for sharing your wonderful tutorial on Merry Monday. Pinned.

    ReplyDelete
    Replies
    1. Erlene, thank you so much! The "pin" is very appreciated!

      Delete
  6. I adore your pin it buttons! Did you create them in illustrator or where did you find them? I am terrible at finding little things like these to base designs for labels and such off of. I am featuring this at Merry Monday Link Up this week! Hope you can stop by, it's my first week hosting.

    ReplyDelete
    Replies
    1. Thanks Rachel! I'll see you at Merry Monday and congratulations on your co-hosting spot!

      Delete
  7. Awesome tutorial !!! So easy to follow !! I just applied it in my blog with a very simple design !! Thank you for sharing !!! Absolutely loving and will try more :)

    ReplyDelete
Blogging tips