• Home
  • About
    • About
    • Contact
    • Privacy Policy
    • Disclosure
    • Work With Me
  • College
    • Dorm Life
    • Money and Budgeting
    • Organization
    • Productivity
    • Studying
  • Blog Advice
    • Starting A Blog
    • Favorite Blog Tools
    • Blogging Resources
    • Making Money
    • Blog Growth
    • Income + Traffic Reports
    • Design
    • Coding Tutorials
    • Social Media
    • Genesis Framework
    • WordPress
    • Blogger
  • Wellness
  • Lifestyle
  • Career
    • Internships
    • Interviewing

Jessica Slaughter

How To Add A Hovering Pinterest Button To Your Blog Images

in Blogging, Coding Tutorials on 12/21/14

As you probably know by now, Pinterest is one of my favorite social media platforms, especially when it comes to blogging. It’s the perfect place to get your content in front of new eyes, and test out your approach to new readers. And I mean, who doesn’t love an infinite feed of blogging tips, clothing styles, and cute puppies? Simply put, I can’t get enough of it, so when I redesigned my blog a few days ago, I made sure it was Pinterest friendly!

How To Add A Hovering Pinterest Button To Your Blog Images | Jessica Slaughter

One of the best things you can do for your blog is make your content easily shareable. If I can’t find a way to share your post within a few seconds of glancing, I probably won’t share it. I’ve found that the easiest way to prompt my readers to pin my graphics is by making it pinnable through a hover button. That way, all they have to do is hover over their favorite image, click my custom button, and be taken to a window for pinning it! You might have seen this kind of button on other blogs and thought it was something only knowledgable coders can install, but I promise, it’s super simple (on both Blogger and WordPress!).

Blogger Tutorial

1. From your blog’s dashboard on Blogger, go to Template > Edit HTML.

2. Search for the </body> tag.

3. Copy the code below, and paste it above the </body> tag:

4. To use your own custom button, replace the URL in line 3 with the direct URL of your button image. You can get that URL by uploading your image to a website like Photobucket.

5. If you don’t want your button to be placed in the center of your graphic, change the center in line 4 to topleft, topright, bottomleft, or bottomright.

6. Save and view your blog!

WordPress Tutorial

Thanks to plugins, this is super easy. There are several options out there, but I use the jQuery Pin It Button For Images plugin, and it’s always worked well for me! Install it like any other plugin, and go to its settings page under “settings” in your WordPress dashboard. Then select the “visual” tab, where you can select the image you want to use and edit any other settings necessary. That’s it!

Designing your custom Pinterest button

The great thing about these methods is that you can use whatever image you want, which is great for keeping your blog’s color scheme consistent! Here are some tips for creating the best Pinterest button:

  • If you don’t have professional graphic design software, I recommend using a website like Canva, Pixlr, or Picmonkey. I might have to make an entire post about these websites, because I love them so much!

  • A good size to go off of is 100 x 100 pixels, which avoids covering up your graphic too much or making it too small to read.

  • If you use text on your button (like “Pin It!”), use a simple font. Fancier fonts tend to take up more room, meaning the text has to be smaller to fit in your button. An exception would be using your blog header’s font, as long as it’s readable!

  • Stick to your blog’s theme. It makes your blog look more professional and clean!

14 Comments

  • Twitter
  • Facebook 0
  • Pinterest 33
« Using Pinterest Boards To Organize Your Life
The Ultimate Blog Revamp Checklist »
Jessica Slaughter Blogger

Hey there! I'm Jessica, a 22 year old Software Engineer at Google living in Seattle, Washington. Welcome to my blog! Expect a lot of college, blogging, career, and healthy living advice along with some mixed-in life ramblings!

Follow

Top Posts & Pages

  • 12 College Dorm Room Must Haves
    12 College Dorm Room Must Haves
  • How To Earn Money Using ShopStyle Affiliate Links
    How To Earn Money Using ShopStyle Affiliate Links
  • How To Customize The MailChimp Signup Form On Your Blog
    How To Customize The MailChimp Signup Form On Your Blog
  • Lazy Meal Prep Ideas for College Students
    Lazy Meal Prep Ideas for College Students
  • Finding Your Instagram Style
    Finding Your Instagram Style
  • The Ultimate Guide To Getting Fit In College
    The Ultimate Guide To Getting Fit In College

Copyright © 2022 · Design by Jessica Slaughter

Copyright © 2022 · Glam Theme on Genesis Framework · WordPress · Log in

Disclosure

Some of the links below are affiliate links, which means that if you click on a product link, I may receive compensation. This compensation comes at no additional cost to you, and as always I only recommend products I trust!

Jessica Slaughter is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.