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:
<div style=”float: right; margin: 4px;”><a href=”javascript:void((function(){var%20e=document.createElement(‘script’);e.setAttribute(‘type’,’text/javascript’);e.setAttribute(‘charset’,’UTF-8′);e.setAttribute(‘src’,’http://assets.pinterest.com/js/pinmarklet.js?r=’+Math.random()*99999999);document.body.appendChild(e)})());”><img alt=”Pin It” class=”aligncenter” src=”http://img.photobucket.com/albums/v419/green_tea/pin.jpg” /></a></div>

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!