Free Blogger Templates :

facewoman
Ayo berikan dukungan dan semangan anda kepada kami hanya dengan like page Tutor | Blog™ agar tetap terus Maju.

How To Show Social Media Sharing Button?

Minggu, 04 November 2012 | 0 komentar

Actually, Blogger has default social media sharing feature, but it doesn't show sharing count. Sharing count help us as author, knowing about popular post or reader preferences.

Another way to show social media sharing button is using horizontal social button. I like this social button because not too large to put on my post. Usefull and simple enough.

How to put horizontal social button on blog?


  • Go to Template, then click Edit HTML. 
  • Tick mark Expand Widget Template, then find (ctrl+f) 

<div class='post-header-line-1'> if you want to put it above post, or
<div class='post-footer-line post-footer-line-1'> if you want to put it under post

  • Paste these code below that code on second step

<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='float:right;padding:10px 0 10px;'>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<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 End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

  • Click Save button

Share to Your-Friends

0 komentar:

Posting Komentar

 
Support : Free Blog Templates | Free GPRS lt
Copyright © 2012. Tutor | Blog™ - All Rights Reserved
Proudly powered by Free Blog Template
Contact @ FREE GPRS LT