Friday, November 11, 2011

How To Add A 'Pin It' Button to EACH Blog Post!

As you may have seen from my post a couple of days ago, I have become obsessed addicted to Pinterest.com. It's pretty bad, but in a good way. I think? Well, I have been looking EVERYWHERE for a simple, easy to understand way of adding a 'Pin It' button to my posts without having to go into the "Goodies" page on Pinterest each & every time I post. Aggravating, right? I knew it existed, because I've seen them on numerous sites, but NONE of them we're easy for me to understand, and I actually know a little about HTML! So, you can imagine my excitement when I came across a tutorial that actually worked & didn't make me feel like a Class-A dufus in the process. And it's all thanks to JulieAnnArt.com!

Here's how she (and I) did it:

First, you'll need to find a 'Pin It' button you want to use. I used a basic one, like this:

Feel free to use this one if you'd like. Just right-click it and 'Save Link As' to save to your PC. Then, you'll need to host it somewhere like ImageShack or FileDen. Once you have uploaded it to your host of choice, then grab the 'Direct Link' or URL link. You would then copy & paste your NEW image URL over where you see my "http://img259.imageshack.us/img259/7278/pinit.png" URL in the code below:

FYI: this tutorial and code will be inserting the 'Pin It' button in your footer, as you'll see in my footer below. Keep in mind, your footer may be wider or taller than mine, but that's OK - It'll still be in a great spot & easy for everyone to see. 

Here's the (magic!) HTML Code:



You'll need to access your 'Template' page and click 'Edit HTML'. (I know HTML can be a bit scary, but trust me, this is scare-proof)

I've laid it out, step-by-step...
**Click photos to enlarge**

1.

 2.


3.


**The CTRL F target is: div class='post-footer'**

The next step will have you copying & pasting the HTML code I gave you above exactly where you see it below. Be careful! Any misstep or errors in the code (even an extra space) will cause it to give you an error.

4.

Don't forget to click 'Save Template'! 

Then, VOILA! You're done! Now you'll have a Pin It button on EACH post so you can share all your blog awesomeness to the world! Easy, right?

Again, thank you so much to JulieAnnArt.com for the tip! Hop on over to her blog! It's pretty dang awesome!
Happy Pinning!

Follow my blog with Bloglovin

3 comments:

  1. I'd love to us this, but it's not working for me. I keep getting the error about the HTML. Any ideas?

    ReplyDelete
  2. Jenny, you more than likely have an extra space, or not the exact code as shown above. Any mistep and it will give you an error. It worked for me no problem - I wish I was right there with you to help you! Keep trying! Look over the code you're typing in 500x over and compare it to mine. Does it match? Are you putting it in the right place?

    ReplyDelete