Simple Social Share Button Untuk Blog

Contoh widget blog sederhana untuk berbagi ke Sosial Media

by Kang Mousir

HTML

<ul class='sharebutton'>
<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,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);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,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);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,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);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,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on...

CSS

.sharebutton{list-style:none;margin:0;padding:0}
.sharebutton a{color:#FFFFFF!important;display:block;font-family:"Open Sans","Tahoma","Verdana","Arial",sans-serif;font-weight:600;text-decoration:none}
.sharebutton li{float:left;margin-right:5px;}
.fb a{background:#306199;padding:7px 10px}
.fb a:hover{background:#244872}
.linkedin a{background:#007bb6;padding:7px 10px}
.linkedin a:hover{background:#005983}
.twitter a{background:#26c4f1;padding:7px 10px}
.twitter a:hover{background:#0eaad6}
.gplus a{background:#e93f2e;padding:7px 10px}
.gplus a:hover{background:#ce2616}
.pinterest a{background:#b81621;padding:7px 10px}
.pinterest a:hover{background:#8a1119}
.pinterest{margin-right:0}