Skip to main content
DIY Tutorials

How to Add a Pinterest Button to All Blog Posts

**UPDATE**
If you’re using the “new Blogger interface”
an updated version of this tutorial is available here!

With Pinterest gaining popularity (or becoming an obsession?) I wanted to add a Pin It button on all of my posts to make them easier for myself, and others, to Pin to their boards. This took some time. Most of the tutorials I found involved having to add the html code at the bottom of EVERY post I write. Not exactly what I had in mind. I put my (minimal) html skills to the test and after some blood, sweat and tears, figured it out! I wanted to share this tutorial because Pinterest is a huge promotional tool that I use every day.

1. Copy this code:

2. Once you’ve logged into your Blogger Account, go to the Design tab and select Edit Html. 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!

Special thanks to ClickinMoms for getting me started on this post!

Join the discussion 163 Comments

Leave a Reply