Sunday, February 26, 2012

Tutorial: How to add a "pin it" button




Want to learn how to add one of those Pin it buttons so that it automatically shows on each blog post? It's easy, let me show you how!

Step 1: From your blogger dashboard, click on "Settings". Then select "Template".



Step 2: Click on Edit HTML.


Step 3: Click the box to add a check mark where it says "expand widget templates".




Step 4:  Find the text in the html coding that says <div class='post-footer'>.
 Immediately after that, paste 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>

Step 5: Select "save template" and you should now have a Pin It button on each blog post!

_______________________________________

To use your own image, replace the image code in the html above with this: 

http://img.photobucket.com/albums/v419/green_tea/pin.jpg

To add the Pin it button to the left side instead of the right:

Replace <div style="float: right; margin: 4px;"> coding with just <div>.

17 comments:

  1. Thanks for sharing this, it would be nice if everyone had a Pin It button on their blog posts. I have been creating the button for each blog post, I have Word Press, would be nice if I could just paste that code somewhere and not have to make a button each time.

    ReplyDelete
  2. Why thank you!!! I've always wanted to do this and now I know how..btw i have changed my blog name and url name! I will have a new button soon, but for now my FlourNFriends won't be working anymore :( my new url name: MrsBGreenJeans@blogspot.com

    ReplyDelete
  3. Thank you! that worked perfectly!

    ReplyDelete
  4. Thanks, I really wanted to know how to do that.

    ReplyDelete
  5. Thanks so much for the tutorial. I have been wanting to add that button for a while now.

    ReplyDelete
  6. WOW that was so helpful...as a new blogger I REALLY appreciate this!!!

    ReplyDelete
  7. Great tip! Thank you!!
    ~Elena
    http://acasarella.blogspot.com

    ReplyDelete
  8. Yay! It worked. :) Thanks again!!

    ReplyDelete
  9. Can we change the colour? Thanks :)

    ReplyDelete
  10. OMG litarally saved my life!!! Thanks!

    ReplyDelete
  11. Very helpful tutorial! Thank you!

    ReplyDelete
  12. Thank you for this...I used it an it's just PERFECT!

    ReplyDelete
  13. Thank you so much...it looks great! I was wondering, is there any way to only add it to individual posts and not the home page too? I want readers to only pin individual blog posts...not the my home page.

    ReplyDelete
  14. I am so proud to say it worked! Thanks so much!

    ReplyDelete

I'd love to hear from you! Please leave a comment and let me know that you stopped by.