Selamat datang di Syam’s Blog
 | ||||
| Gambar berputar dan membesar |
Jumpa lagi di Syam’s Blog pada kesempatan kali ini saya akan membahas tentang Cara Membuat Gambar Membesar dan Berputar Saat di Sentuh Oleh Mouse.
Baca postingan terdahulu :
Ada banyak cara untuk memperindah tampilan gambar di blog, salah satunya adalah memberikan efek berputar dan membesar di tampilan gambar.
Berikut langkah sederhana yang akan saya berikan:
1. Login ke akun blogger anda. blogger.com
2. Pilih Template
3. Klik Edit HTML
4. Cari kode </head> . untuk mempermudah pencarian gunakan Ctrl+F
5. Letakkan kode di bawah ini tepat di atas kode
</head>
</head>
<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>
6. Klik Simpan template.
Langkah berikutnya untuk menempatkan gambar dalam postingan.
1. Anda harus menambahkan kode <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:
<div id="denzuaz">
<a href="http://syamsblog95.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiAwXssZOGXYFpvFsGtPsxJRa_GB8C8vhIEco86ig9AaPKdL7keY1XkU2baS_TflirS-fk4g0TdvJgqM_a0Z2Vz5z3jqiIVvhKBffTH8cPgXrEnv5vIDRRhdOmBVxlwxmNVyOv9hZ9Lk_/s200/naruto+dont+copy.png" /></a></div>
<a href="http://syamsblog95.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiAwXssZOGXYFpvFsGtPsxJRa_GB8C8vhIEco86ig9AaPKdL7keY1XkU2baS_TflirS-fk4g0TdvJgqM_a0Z2Vz5z3jqiIVvhKBffTH8cPgXrEnv5vIDRRhdOmBVxlwxmNVyOv9hZ9Lk_/s200/naruto+dont+copy.png" /></a></div>
1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan anda ganti dengan URL blog anda dan URL gambar yang ingin anda pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan.
2. kode berwarna hijau silakan anda ganti dengan URL blog anda dan URL gambar yang ingin anda pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan.
Baca juga :
Cara mudah dan cepat backup template blogger
Posted by , Published at 9:00 AM and have
