Cara Membuat Gambar Berputar di Blog
Artikel kali ini masih seputar gambar yaitu tentang cara membuat gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara membuat gambar posting berputar dan juga membesar ketika di sentuh oleh kursor. Bedanya, kalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.
Dengan cara memasukan gambar kita sendiri, ke tata letak pada bagian Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
- Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
- Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
- Setelah itu copi kode dibawah ini.
- Dan Pastekan di HTML/Javascript Tadi.
- Setelah itu save, lalu pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.
<style>
#img{
width: 250px;
height: 200px;
position: relative;
-moz-transition:all .8s ease-in-out;;
-ms-transition:all .8s ease-in-out;;
-o-transition:all .8s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .8s ease-in-out;}
#img:hover{
-o-transform: scale(1) rotate(360deg);
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
}
</style>
<div id="img">
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQ9qVbzWJ2GXhKojI_106-WNVckZQ3XVvBQYxxgxnhygR3Sa2b2mbjhBB6hjtptbyrgIQfNF1lYXPPA8TkYigvoLqHUqUmB8FSfRKrS-XJ2k20kcmAUvjK9N6WxfFwsIsII2CQIvwqJ34/s1600/A.jpg" />
</div>
#img{
width: 250px;
height: 200px;
position: relative;
-moz-transition:all .8s ease-in-out;;
-ms-transition:all .8s ease-in-out;;
-o-transition:all .8s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .8s ease-in-out;}
#img:hover{
-o-transform: scale(1) rotate(360deg);
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
}
</style>
<div id="img">
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQ9qVbzWJ2GXhKojI_106-WNVckZQ3XVvBQYxxgxnhygR3Sa2b2mbjhBB6hjtptbyrgIQfNF1lYXPPA8TkYigvoLqHUqUmB8FSfRKrS-XJ2k20kcmAUvjK9N6WxfFwsIsII2CQIvwqJ34/s1600/A.jpg" />
</div>
Keterangan Kode:width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s adalah lama putaran gambar.
scale(1) ini fungsinya agar gambar tetap pada ukuran semula ketika disentuh mouse, jadi gambar tidak membesar atau mengecil ketika disentuh kursor.
Dan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQ9qVbzWJ2GXhKojI_106-WNVckZQ3XVvBQYxxgxnhygR3Sa2b2mbjhBB6hjtptbyrgIQfNF1lYXPPA8TkYigvoLqHUqUmB8FSfRKrS-XJ2k20kcmAUvjK9N6WxfFwsIsII2CQIvwqJ34/s1600/A.jpg adalah URL dari gambar yang ingin kalian masukan.
Itulah sedikit pembahasan atau tutorial desain blog yang dapat saya bagikan, yaitu tentang cara membuat gambar berputar di blog, ketika disentuh kursor mouse. Semoga Bermanfaat.
Dapatkan Penghasilan Tambahan Dengan Bermain Poker Online di www,SmsQQ,com
BalasHapusKeunggulan dari smsqq adalah
*Permainan 100% Fair Player vs Player - Terbukti!!!
*Proses Depo dan WD hanya 1-3 Menit Jika Bank Tidak Gangguan
*Minimal Deposit Hanya Rp 10.000
*Bonus Setiap Hari Dibagikan
*Bonus Turn Over 0,3% + 0,2%
*Bonus referral 10% + 10%
*Dilayani Customer Service yang Ramah dan Sopan 24 Jam NONSTOP
*Berkerja sama dengan 4 bank lokal antara lain : ( BCA-MANDIRI-BNI-BRI )
Jenis Permainan yang Disediakan ada 8 jenis :
Poker - BandarQ - DominoQQ - Capsa Susun - AduQ - Sakong - Bandar Poker - Bandar 66
Untuk Info Lebih Lanjut Dapat menghubungi Kami Di :
BBM: 2AD05265
WA: +855968010699
Skype: smsqqcom@gmail.com