12.03.2012

How to Add a 'Pin It' Button to the Bottom of Your Posts

TUTORIAL
HOW TO ADD A 'PIN IT' BUTTON TO THE BOTTOM OF YOUR POSTS

1- Select a 'Pin It' photo.
      You can google Pinterest photos and select one that way, or you can use mine by right clicking
      and saving the picture.

     


2- Upload your photo to photobucket.
     {You will need the photo's URL in a minute}

3- Placing the code.
     Go to Dashboard - Template - Edit HTML - (Proceed) - Click Expand Widget Button
     Use 'ctrl f' so find this code: <div class='post-footer'>
     Place the following code right above the code you found:
     
<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!" style='border: none;' src="INSERT IMAGE URL HERE"/></a>

     {You will need to replace the red font with your image's URL from photobucket.}
      Example of my URL: http://i1245.photobucket.com/albums/gg590/YellowUmbrellaDesign/pinit.gif

     If you need more spacing before your 'Pin It' button just add <br/> above your 'Pin It' Code.
     {You can add as many of these as you want for extra spacing.

4- Now just save and your are all done!




1 comment :

Related Posts Plugin for WordPress, Blogger...