Widget Twitter Bisa Berputar

Setelah Mencuri Widget Dari Kak Ladida Dan Mempostingkannya, Saya Telah Berhasil Mempelajarinnya Dan Merubahnya Semua Struktur CSSnya (Bohong ☺). Lalu Saya Mencoba Membuat Widget Sendiri Dan Hasilnya Seperti Gambar Dibawah ini.

widget hand edit

Tapi Sayangnya Widget ini Hanya Optimal Di Google Chrome Dan Mozilla Firefox Versi Baru
Bagi Yang Mau Membuatnya Silahkan Ikuti Langkah Dibawah



Langkah 1


Copy Kode CSS Dibawah

.teduweb_twitter:hover{opacity:0;background:none}
.teduweb_twitter{-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out}
.teduweb_twitter,.teduweb_twitter{-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out}
.teduweb_twitter:hover{-ms-transform:rotate(370deg);-webkit-transform:rotate(370deg);-o-transform:rotate(370deg);-moz-transform:rotate(370deg)}

Paste Diatas Kode ]]></b:skin>


Langkah 2

Copy HTML Berikut

<div style="position: absolute; bottom: 175px;">
<div style="margin-left:25px;margin-top:20px;height:160px;background:url('http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-twitter-box-white-icon.png')no-repeat">

<a href="http://twitter.com/#!/TentangDuniaWeb" target="_blank" title="Twitter" rel="twitterku">
<img alt="Follow Me" class="teduweb_twitter" style="background:url('http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-twitter-box-blue-icon.png');" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdqw20-a5pjW4SDEHIf08YweKlCgh3NWpx9QYsbJXne14CjgWmKMQ-MMib3ZOlFzsTcme2U_DhlRXVhdkhFbao3M02nVcQrv1uMG_kyRXx0WEn0tvx8FVHfzMnnCOjUNY6QKtAupqErVe/s1600/ladida-jebakan.gif" width="128" height="128"/></a>
<a href='http://tentangduniadanweb.blogspot.com'>Asik</a>
</div></div>

Paste Di HTML/Javascript

Keterangan
Ganti Teks Yang Bewarna Merah Sesuai Dengan URL Twitter Anda