Artikel kali ini masih seputar gambar yaitu wacana cara menciptakan gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara menciptakan gambar posting berputar dan juga membesar dikala di sentuh oleh kursor. Bedanya, jikalau 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 bab 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 isyarat dibawah ini.
- Dan Pastekan di HTML/Javascript Tadi.
- Setelah itu save, kemudian 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/AVvXsEgREYJpfwKMg_lecnNo3R_ONZXJWeCZW33UYKNXNZ6wSizecFB9wDxKp57gWWBGa3v0_jm9Cjx6M7nP648z-mMF6getb42hjlTwbQdliWvWVN2cPAP_yp2WkwUeKJwVsEgClb78VK-Ck7aG/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/AVvXsEgREYJpfwKMg_lecnNo3R_ONZXJWeCZW33UYKNXNZ6wSizecFB9wDxKp57gWWBGa3v0_jm9Cjx6M7nP648z-mMF6getb42hjlTwbQdliWvWVN2cPAP_yp2WkwUeKJwVsEgClb78VK-Ck7aG/s1600/A.jpg" />
</div>
Keterangan Kode:
width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s ialah usang putaran gambar.
scale(1) ini fungsinya biar gambar tetap pada ukuran semula dikala disentuh mouse, jadi gambar tidak membesar atau mengecil dikala disentuh kursor.
Dan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREYJpfwKMg_lecnNo3R_ONZXJWeCZW33UYKNXNZ6wSizecFB9wDxKp57gWWBGa3v0_jm9Cjx6M7nP648z-mMF6getb42hjlTwbQdliWvWVN2cPAP_yp2WkwUeKJwVsEgClb78VK-Ck7aG/s1600/A.jpg ialah URL dari gambar yang ingin kalian masukan.
Itulah sedikit pembahasan atau tutorial desain blog yang sanggup aku bagikan, yaitu wacana cara menciptakan gambar berputar di blog, dikala disentuh kursor mouse. Semoga Bermanfaat.
0 comments:
Post a Comment