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="http://1.bp.blogspot.com/-zzx_HVQ5DBA/TmgTkSQNDBI/AAAAAAAABSA/1U41IF3oD3E/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

9 Orang Yang Cerewet:

Miftah Afina mengatakan...

berat ga, nih?

Uda cucanto mengatakan...

gag

Share Our Knowledge mengatakan...

mantab.. :D
langsung praktekkan

CyberGoBlog mengatakan...

Tapi saya liat cssnya sama gan? yg beda cuma id dr css tersebut.

Uda cucanto mengatakan...

Beda Gan
itu Gabungan Dari Kedua Kodenya

Cara Buat Tombol Like FB Di Post Blog mengatakan...

izin coba gan, koment back ya :)

Cek Info mengatakan...

wah keren jg efekny :D

Tembong_Blogger mengatakan...

bagus ☺♥☺

Pekalongan Community rifki mengatakan...

Wajib Dicoba
☺☻♥♀

Posting Komentar