Cara Membuat Tombol Share Dengan Efek Berputar

saat ini banyak widget share button yang dirilis untuk blogger,nah kali ini saya akan membantu anda untuk membuat widget share button yang keren,dimana pointer mouse diarahkan ke tombol share tersebut maka tombol share akan bergerak melingkar.liat gambar berikut ini : 

setelah melihat gambar tersebut jika anda tertarik dan ingin mempercantik blog anda berikut caranya :
1. Login blogger>desain>edit HTML>Templates dan cari kode berikut : untuk memper mudah gunakan (ctr+f)

<data:post.body/>

2. tepat dibawahnya tambahkan kode berikut :

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/blogbelajar2' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

3. ganti link yang berwarna merah dengan link feedburner anda,jika anda belum punya silahkan buad dulu link feedburnernya,berikutnya cari kode tersebut :

]]></b:skin>

4. tepat diatas kode tersebut tambah kode berikut diatasnya :

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRaQhRvMeZ00rGo1qVDSUW758SfRqXnoWVuWGXmGePbeZe2ZYc3J0wZzru_U0Z8cnSdMrpnGB_bHhsTL0ZX0jkKRvj6edUopGKFmKsJznDwmME8z28ihAREwfDYYevyifWXv7Xvhg-IDU/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNH0xR0CCl4eT9LSvic5Y0TAaBXRiPdqXdEJpJtB1kyTTeGZFPmuExJnjHA798_9kDnWGCaoSjtUuf9WP67XuPtk8zuIXWXi4XSgxh_nl6cPKTd9_Do427HodVHUNauPzRNr8iPDP2jg/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMSmiiMI1LSza0eGxVPBkqtUzoYSgFH-JLLQAAeelmO6qQZa_UdNcOVAnWCV3T1g4zQRVeVLzerqKC4eHVgtnq5XiyU2G5jZRbHq0ZSxRkVyIC3fut47pKdvon5SZhX1e-gCh-Rp9gAQ/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUFFBDU5zQjW-uHoD1wEHleqvnsTnRbVrfvyUBZPiqOeN20NE3__JXgjvTug0rELwYGIQU2R3tFOM6gv2coYpdNTBC1icfc1aGvVNnQ5z_XxxwS0g72By3X3Y-mp0MSaitUedAPFkvJ8/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0AZ3NA1r2F2-EINaPBVWpgim6n40XiJmKngBIjkS3hmzNFncK-Zu5jJkcLCs-QImwCqQcjVl00enmGOKf_tafUzWzS_V4nrG6Fr8LS-H0sSakYjQxrOB8mO-6JW6lWcR7zxuvwJiuJY/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtD6z8NHv1Fq5qAYHl_rRbrwKvkgiIvPJewTMMgVH1waZ1bHqRiXrDWOE3-kEIeREH1CBzlLxUSumWxsJmRHciq6i_-bi2g4QWbqNRl9Nq8fnLJWcJrLQN6O_UHaMRlXcEetmcSkMVe80/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

5. setelah semua selesai cek pretinjau dulu sebelum di save,jika gagal maka kode ada yang salah,biyasanya letak kesalahan ada pada <data:post.body/> biyasanya ditemplate2 terdapat kode seperti itu lebih dari satu,coba lah satu persatu. jika berhasil di cek dipratinjau maka bisa langsung disave dan tombol/button share telah terpasang pada bagian dibawah postingan artikel anda. dan untuk hasilnya silahkan anda lihat dibawah post artikel saya.selamat mencoba. 

Twitter Delicious Digg Facebook Stumbleupon RSS