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/AVvXsEgblIyoQOKpZAOnT6aNWV0bvEOA6oDmbI9QSkcKYF74S5jMmKu-eZeLF5TtuI4oyGsxggt_mzaE7BoIA4WCF-iES22oN1IxSFfUyF6PTBZo24tOElRiLjuWGPbLp9v8PF0XgbhsOENs3nJu/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/AVvXsEgblIyoQOKpZAOnT6aNWV0bvEOA6oDmbI9QSkcKYF74S5jMmKu-eZeLF5TtuI4oyGsxggt_mzaE7BoIA4WCF-iES22oN1IxSFfUyF6PTBZo24tOElRiLjuWGPbLp9v8PF0XgbhsOENs3nJu/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/AVvXsEgblIyoQOKpZAOnT6aNWV0bvEOA6oDmbI9QSkcKYF74S5jMmKu-eZeLF5TtuI4oyGsxggt_mzaE7BoIA4WCF-iES22oN1IxSFfUyF6PTBZo24tOElRiLjuWGPbLp9v8PF0XgbhsOENs3nJu/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.
