Monday, July 23, 2012

How to Add a Pinterest Button to Posts in New Blogger

One of my most popular posts has been my "How to Add a Pinterest Button to All Blog Posts" post. However, lately I've been getting questions on how to do it in the new Blogger interface. I updated the tutorial below. Hope this helps you navigate through the new look a bit easier!


1. Copy this code:


2. Once you've logged into your Blogger Account, click the Template tab and then select Edit Html.


Click Proceed, and an html box will pop up. Be sure to check the "Expand Widget Templates" box.

3. Look for <div class='post-footer'> and paste the code directly after that.

4. Save your Template and you should be good to go!

Note that this coding makes the Pin It button appear on the bottom right side of your posts. If you want the button on the bottom left side of your posts, replace the <div style="float: right; margin: 4px;"> coding with just <div>.

You can also customize your Pin It button. I used the standard Pin It image that Pinterest supplied, but changed its color to match my blog. You can really use any image that you want. Once you create it, host it online, and put its link in place of http://img.photobucket.com/albums/v419/green_tea/pin.jpg in the coding above.

Adding a button to your blog is a great way to help readers keep track of their favorite posts from your blog! They can easily find, or be reminded of, DIY tutorials they want to try or products they want to add to their wishlist! Give this Pin It button tutorial a try!

46 comments:

  1. You're the best! Thank you for sharing this.

    http://shannonhearts.blogspot.com/

    ReplyDelete
  2. YAY!!!!!!!!!!!!!!!!! Thank you! You do not know how long I have wanted to know how to do this! Your directions were amazing. Thank you for being a blogging angel! XO

    ReplyDelete
  3. This is awesome!!! Thanks so much!!!!!!

    ReplyDelete
  4. This was a great help! I did it! I've been trying to figure that out since forever :)

    ReplyDelete
  5. Oh my gosh, I think I have done it! Thanks to your help! I didn't edit my html though (chicken) I clicked "settings" "basic" and then "posts and comments" and added the code there. (less damage if I messed up?) Anyways, just pasted your code there, and did a test post, THERE IT WAS - all beautiful and "pin it"-y. THANK YOU!

    ReplyDelete
    Replies
    1. This actually worked for me! Thank you!

      Delete
  6. Wow, you're just awesome! Thanks! It works like magic. :)

    ReplyDelete
  7. Awesome! Thank you for sharing!

    ReplyDelete
  8. Aw man! Thank you from the bottom of my heart! All this computer jargon makes me nervous that I'm gonna screw my blog up but it worked great! The hardest part was looking for the post-footer line! LOL

    ReplyDelete
  9. thx so much for sharing! I couldn't find this any where! Do you have tutorial on a tweet & FB end of post button? =)

    callelillycafe at me.com {including just in case you can help. thank you}

    ReplyDelete
  10. Thanks for this!! I love the color, too ... it matches my blog! :o)

    ReplyDelete
  11. thank you so much! it worked like a charm! although i don't understand how to change the color.

    ReplyDelete
  12. Thanks for sharing this great tutorial! I've linked to it in my post about blog re-redesigning (don't want to promote myself, but lots of bloggers seem to want to see the post they've been linked to, so here's the link: http://cocalores.blogspot.de/2012/07/tutorials-ans-ressources-for-your-blog.html). xo Anja

    ReplyDelete
  13. Just the tutorial I was looking for! Thanks! It also matches my blog!
    Amber @ The Teacher Life

    ReplyDelete
  14. Thank you so much for this tutorial.

    ReplyDelete
  15. Thanks! That was super easy!

    ReplyDelete
  16. Anonymous1:23 PM

    Great tutorial! Thanks a lot!

    ReplyDelete
  17. GREAT help. Thanks so much for this easy way to add Pin it. (Momma's Fun World)

    ReplyDelete
  18. Hey thanks for sharing, it worked :)

    Samantha
    http://randomandsam.blogspot.com

    ReplyDelete
  19. Thank you! I had done this before but completely changed my blog's template and lost it, so I searched google and pinterest to find instructions that worked since I hadn't saved my earlier ones. Yours were the only ones that worked!

    Bonny @ thedomesticatedprincess.blogspot.com

    ReplyDelete
  20. I did it!!!!http://therecessionprooflife.blogspot.com/

    ReplyDelete
  21. Thanks so much for this, I'm going to try it! I'd like to change the color to something that matches my blog...I'm wondering how you did that :)

    ReplyDelete
  22. Awesome. Works like a charm! Thanks so much!

    ReplyDelete
  23. Thank you!! So easy!!

    ReplyDelete
  24. Anonymous12:39 PM

    Been looking for this code for such a long time!! thank you!!!

    ReplyDelete
  25. Great tip. Just tried it and it worked. It was super easy.
    Thanks so much!

    ReplyDelete
  26. Thank you so much! It was super easy and works perfectly!

    ReplyDelete
  27. Thanks so much for sharing!! I'm so happy with my button ;-)

    ReplyDelete
  28. Nothing happens when I click on the pin it button, did i do something wrong?

    ReplyDelete
  29. thank you! That was really easy to follow!

    ReplyDelete
  30. Hi. I could not find class='post footer'
    even with using ctrl f on my blogger page. Is there another code line to look for?

    ReplyDelete
  31. Thanks for the tutorial. I've just used it on my blog.

    ReplyDelete
  32. I have the same problem as Irina..I click the button and nothing happens. Just a blank screen. Any advice? Thanks!

    ReplyDelete
  33. Thank you so much!!! Very easy to follow!

    ReplyDelete
  34. I got the code in but it doesn't link?

    Any thoughts?

    http://www.mypricelessfishers.com

    ReplyDelete
  35. thank you so much for sharing this! The first tutorial that was easy and actually made sense :)

    -Jesse
    willowgrandblog.com

    ReplyDelete
  36. Thanks a bunch for this tutorial! I've shared it on my blog with a link back here:

    http://newendstudio.blogspot.com/2013/03/quick-pinterest-tip-for-blogger-and.html

    ReplyDelete
  37. This worked for me, however, when i click on pin it, it brings up all of the pictures on my blog, not just the ones in that post. Is there some way to have it only show the picture in the post I want to pin? It pins my entire blog, not the post. Thank you :)

    ReplyDelete
  38. THANK YOU!!!!! I have been trying to add the "pin it" button to my blog for over an hour now, and no other blogger tutorial I found on the web (there were lots!) worked! But yours did! Thank you SOO much!

    thisislifeatourhome.blogspot.com

    ReplyDelete
  39. Thanks for sharing! You made it so simple to figure it!

    ReplyDelete
  40. THANK YOU! THANK YOU! THANK YOU!! I finally did it. Thanks for the easy instruction.

    ReplyDelete
  41. I don't see an option to Expand Widget Template, so I guess that's why I cannot find "div class='post-footer'"

    Any ideas??

    ReplyDelete
  42. Ok, I figured out how to manually expand all the widgets (shew), but it didn't work. Any idea what went wrong? Thank you.

    ReplyDelete
  43. I can not find an "expand widgets template" button. Any advice?

    ReplyDelete
  44. Hmm, it didn't work for me. Like others, I didn't see "Expand Widgets" button, but found the "div class= 'post-footer' and copied the code directly after. The Pin It button did not show up anywhere.

    ReplyDelete

Thanks for the comment! I read them all and reply when I can. Please be sure your blogger account is linked to your e-mail so I can do so! (Tutorial on how to do that here: http://tinyurl.com/c6gh9fk) xo JA