Cara Membuat Spinning Share Widget

Beberapa share icon widget hanya mempunyai tampilan status. Mungkin kita perlu berinprofisasi dengan menambahkan tag transform agar widget tersebut bisa bergerak memutar. Saya yakin tampilan ini akan menjadi menarik dan terlihat unik. Kali ini saya akan share cara membuat spinning share widget dari blogger helper. Thanks to blogger helper for the script. Ok...sekarang ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style>
p#hb_socialicons img{-moz-transition:all 0.8s ease-in-out;-webkit-transition:all 0.8s ease-in-out;  -o-transition:all 0.8s ease-in-out;-ms-transition:all 0.8s ease-in-out;transition:all 0.8s ease-in-out}
p#hb_socialicons img:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);  -o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
</style>
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HjjAbSI3-bWLGjfLrvIY2yPzYBrS0jhDYQIC9e2MHs6Qk3JX7zkMEuAsaqbAUjAhvA0tmVjzLER7WYJ99Yx9MOTkpgEpn8_GSw3K3jAxZev4zuFeNQz1zmBfOZ7NqJTrPeMxj37LOhg/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzhc6jA0MuDup24gz-4JMkz7qAfENMXcGJhml8RxxV1KqV5YpnI1rMU7d9zQzhEzfBsRK2_AA1EhHqUoOx1JIIPsMxddzjdwutoU6yN9BNA8GQlBOVBQUuZzbVQyBJmvzPq1JDvuMAo0/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3u5z8plZD-fI-owSQWmizIKVFGLGl7KN51j1D8ARwBNtbc1N5AkOKE_f7BEvYCsX-2BfiTvpDYNKKqutS3709jWsqOiJW-bFw9ty6APJtYzzDKfhHH3ErTxBS2jDs3p9XaNZuFznNYo/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgurMOaq8BYNnN0CuvgKVW_x2TbPt3PEpfQHA8sDdTPyghyHVg8HJMLWokWcREabI2rkCJMY2c8oBpYYNgKZNn60qPe26F82mYtVxBPb2CAeVTpXMhWVK87V92xeQqHRnrxl2rs-8wKmA/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZLOQZL9wknKpUsQZSRhD3IleLj3Pdj3RAP7J9RasYM1ab1eO7SE2QTAi8sUhEOGOpyFxjTXEAuB3mlw0F7vC5HMbeRehIOLf9VE-PbwGT03WNursPTPayPmSk4E3h4vr1Tk_HiG4its/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Klik Simpan danlihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share

Tweet