April 06, 2015

How to Add a Hover "Pin It" Button to Your Blog Picture
(and 5 Free Buttons for You to Use)

Blogging rule number one: Chevron.

Blogging rule number two: Use Pinterest.

Seriously, everyone and their mothers are on Pinterest. And if you want your blog to grow, you probably should be too.

The great thing about Pinterest is how easy it is to share content, particularly pretty content. (Because we all know that people love pretty things.) But we all also know that people can be sort of lazy, so even if they really want to pin that pretty graphic you spent all evening and two glasses of wine making... they're not going to do it if it takes more than 30 seconds to figure out how.

Which is why we're here: a tutorial on how to get those nifty "Pin It" buttons that appear when you hover over the HTML-savvy bloggers' blog pictures. And because it's Monday, I'm also going to give you a few buttons free to use however you want, compliments of me.

Anyway, first to the code:

Now I'm going to be totally up front here: I got this code from Blogger Sentral, which is the easiest tutorial I've found on Google so far. (And yes, everything I know about HTML I know from Google.)

But for convenience, I'm going to outline the steps and the code below for Blogger users. (This code also works in Wordpress, but I can't do screen shots for that; if you're a Wordpress user, go to Blogger Sentral's page for more information.)

Step 0: BACK UP YOUR TEMPLATE. Seriously. Future you will thank you.
Step 1: Open up Blogger and click "Template" on the left column
Step 2: Click Edit HTML

Step 3: Once you're here...

...click in the code window and hit "CTRL+F"

Step 4: Find the code </body>

Step 6: Right before </body>, copy and paste this code:

Step 7: Decide where you want your button to hover over your images by changing this line of code:
You can replace the word center with any of these commands to have your button appear wherever you fancy:

Step 8 (i.e., the fun step): Replace IMAGE URL HERE with your image URL. You can find all sorts of fun ones on the web but here are a few that I made to get you going.

In case you're wondering where I got the seagull and the thumbtack, I got them from Pixabay, a site where you can find totally free images to use without any fear of legal consequences. (For more places to find free things, see this post.)

And of course, if you like this post, feel free to pin that pretty graphic up there to one of your boards! (And by "feel free," I mean that was the point of this whole post so... ya know, no pressure.)

Happy Monday!