To easily add a 'Pin It' button

Teresa asked how to add the 'Pin It' button next to the other social network buttons right before the comments. Placing it right next to these standard social network buttons and lining them up nicely is difficult, but it is easy to place it just under those buttons.

First (and always) make a backup:
- click on the Template tab
- click on Backup/Restore
- download your template
- close

Now go to edit HTML
Expand widgets
Search (CTRL+F) for this 'pencil' section:

<!-- quickedit pencil -->
  <b:include data='post' name='postQuickEdit'/>
  </span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
  <b:include data='post' name='shareButtons'/>
  </b:if>
  </div> </div>

Under that section paste this section:

<a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Press Preview to see the result

You can play around with it and paste this section somewhere else (above the pencil section, or even in the pencil section) so it will show up in a different place.

Press Save

When one of your readers presses this button he/she can add a picture to their Pinterest pinboard. The source of the picture will automatically be mentioned.

next episode: a supercentenarian