Kebiasaannya di setiap blog disediakan dengan share button supaya anda atau pengunjung mudah untuk berkongsi entri/artikel anda di medium lain seperti Facebook, Twitter, Google +, Linkedin dan juga Pinterest. Berikut merupakan contoh share button yang terbaru dan nampak lebih simple.

Cara Memasang Simple Share Button di Blog

/*Share Button*/
.sharebutton{display:block;list-style:none;margin:10px 0;padding:0}
.sharebutton a{color:#FFFFFF!important;display:block;text-decoration:none!important}
.sharebutton li{float:left;margin-right:5px;}
.share{font-weight:bold;margin-right:10px;padding:7px 0}
.fb a{background:#306199;padding:7px 15px}
.fb a:hover{background:#244872}
.linkedin a{background:#007bb6;padding:7px 15px}
.linkedin a:hover{background:#005983}
.twitter a{background:#26c4f1;padding:7px 15px}
.twitter a:hover{background:#0eaad6}
.gplus a{background:#e93f2e;padding:7px 15px}
.gplus a:hover{background:#ce2616}
.pinterest a{background:#b81621;padding:7px 15px}
.pinterest a:hover{background:#8a1119}
.pinterest{margin-right:0} 

3. Then, copy paste pula code berikut ke dalam HTML template anda.

<ul class='sharebutton'>
  <li class='share'>Share :</li>
<li class='fb'>
<a href='http://www.facebook.com/sharer.php?u=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a href='http://www.linkedin.com/cws/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a href='http://twitter.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<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)})());' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>

4. Seterusnya, untuk memasang simple share button, anda perlu mencari code di bawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>

5. Selepas anda jumpa code di atas ini, copy paste code tombol share tersebut di atas code <data:post.body/> jika ingin menyimpannya di atas entri/artikel atau anda juga boleh menyimpannya di bawah code <data:post.body/> jika ingin menyimpannya di bawah entri/artikel. Perhatikan code berwarna di bawah supaya anda mendapat hasil yang tepat.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>

<ul class='sharebutton'>
  <li class='share'>Share :</li>
<li class='fb'>
<a href='http://www.facebook.com/sharer.php?u=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a href='http://www.linkedin.com/cws/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a href='http://twitter.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/share?url=http://kang-mousir.blogspot.com/2014/08/koleksi-widget-blog-keren-ala-kang-mousir.html' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
.....
 </article>
</b:includable>

6. Save dan preview.


sumber: Kang Mousir