-->

Simple Sharing Button CSS3

simplest sharing button for popular social media: Google Plus, Twitter, and Facebook (share and comment)


Tombol berbagi media sosial yang paling sederhana.

CSS


<style>
/* sharer simple */
.sharer a{color:#000;font-size:75%;padding:7px 13px;text-decoration:none;background:rgba(0,0,0,.1);}
.facebook,.google,.twitter{filter:alpha(opacity=80);opacity:.8;padding:7px 13px;width:100px}
.facebook:hover,.google:hover,.twitter:hover{filter:alpha(opacity=100);opacity:1;color:#fff;padding:7px 18px;text-shadow:0 -1px 0 rgba(0,0,0,.5);-webkit-transition:all .4s cubic-bezier(.49,.22,.52,1);-moz-transition:all .4s cubic-bezier(.49,.22,.52,1);-o-transition:all .4s cubic-bezier(.49,.22,.52,1);transition:all .4s cubic-bezier(.49,.22,.52,1)}
.facebook:hover{background:#3b5998}.google:hover{background:#cc181e}.twitter:hover{background:#58b6cd}</style>

HTML

<div class='sharer'>
<a class='google' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='share via Google Plus'> 1+ </a>

<a class='twitter' expr:href='"http://www.twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='share via Twitter'> Tweet </a>

<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?app_key=174662712726530&sdk=joey&u=" + data:post.url' rel='nofollow' target='_blank' title='share via Facebook'> Share </a>

<a class='facebook ifrm' expr:href='"https://www.facebook.com/plugins/comments.php?api_key=174662712726530&locale=id_ID&sdk=joey&numposts=5&href=" + data:blog.homepageUrl' rel='nofollow' target='_blank' title='comment via facebook'> Comment </a>
</div>