Add Pinterest Pin It Button (With Counter) To Blogger Post

Add Pinterest Pin It Button

Button Placement 

• Go to Blogger Dashboard > Design > Edit HTML  (New Interface: Template > Edit HTML).
• First Of All Back Up Your Template.
• Check the Expand Widget Templates Checkbox
• Press (Ctrl+F) and Find Below Code In Template HTML

• Normally there are two instances of the tag present in your template. Locate the the first (from top) one.
• Paste the following code immediately below (after) it:

• Button Configuration – You can customize the layout of Pin It button & counter by changing the value of count-layout (Yellow). But after change the count-layout also change margin-left (Yellow) value.For example count-layout value – horizontal and margin-left value – -93px.

• Place the button code before <data:post.body/>, instead of after.

• Change the value of text-align property in red color mentioned above in code.
• Align right: set it to right; 
• Align center: set it to center;

<data:post.body/>

<!– Pinterest Button Start –>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div id=’pin-wrapper’ style=’margin:5px 10px 5px 0; text-align: left;’>

<a class=’pin-it-button’ count-layout=’horizontal‘ 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:-93px; width:43px; height:20px; display:inline-block;’/>

</div>

<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> 

</b:if>

<!– Pinterest Button End –>

March 2010.10,000 users.Pin It “How to Add Pinterest Pin It Button (With Counter) To Blogger Post”.
See Also – How To Increase Your Google+ CirclesPosition It On Top Of Post Button Alignment If you find this post useful, please pin or share.Facebook like and twitter tweet button