Cara Membuat gambar pada bagian posting membesar ketika gambar tersebut disorot pointer mouse sangat mudah karena kita khususnya para blogger cukup memasang kode di bawah ini bersama kode css yang lain. Sebelum itu, sebagai contoh saja silahkan coba dulu sorot gambar di bawah ini dan itulah yang akan terjadi atau itulah yang madjongke maksud pada artikel ini.
Madjongke lanjutkan kembali, untuk membuat gambar membesar ketika disorot pointer mouse adalah meletakan kode dibawah ini bersama kode css lain.
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
Khusus untuk teman-teman yang tidak mengerti dengan penjelasan diatas, ada langkah mudah yaitu memasang kode dibawah ini di atas kode
</head> . Lebih jelasnya masuk ke blogger kemudian pilih template edit html lalu letakan kode di bawah ini di atas kode </head>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
Jika sudah simpan dan lihat hasilnya. Satu hal lagi kalau teman-teman ingin membuat efek seperti ini hanya ada pada halaman posting, silahkan ganti kode diatas dengan kode di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
</b:if>
Selamat mencoba dan semoga bermanfaat.
Tips
Cowok
Chat
Zodiak