Animated Social Media Sharing Button !

Hai sob !? Sekian lama enggak mosting (UN mendekat !....)  kini gua kembali dengan nulis posting judulnye Animated Social Media Sharing Button !

Kalo gitu langsung aja nyimak yang di bawah ini ! :DDD

Animated Social Media Sharing Button

Jadi animated social media sharing button adalah tombol-tombol yang menghubungkan blog atau website Anda dengan social media, baik buat nge share postingan maupun merujuk pada akun media sosial resmi dari blog Anda.

Preview

Atau agan mau lihat live demonya ? Scroll down aja sampai paling bawah, karena saya juga pakai widget tersebut untuk blog abal ini .

Ayo Pasang !

Tanpa basa-basi lagi sok atuuh di copy kode di bawah, jangan lupa masangnya di tata letak. TATA LETAK > TAMBAHKAN GADGET > HTML/JAVASCRIPT

<style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNDnF2-nHZMHA4uVVY3NB-iL4nJuNeTauZsJrdNa8AgiABjbGJSi7-ymVdd3vxVh6RKjZ1AXXPcUNMPIntt3VTW4zmVlxzRLoAmZay_AF1yrP1OZdPzYR94a9M3MRwWokwFsX81xwUL10/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/pengentahuajaa?fref=ts">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/AkuNaufal">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/b/108113618867864935460/108113618867864935460/posts">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="https://www.pinterest.com/emailnyanaufal1/">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="">Subscribe with RSS</a></li> </ul>