Cara membuat zom gambar otomatis postingan , Zoom gambar otomatis ini jika krusor/mouse di letahkan di atas foto/gambar maka gambar pun akan otomatis mengezoom.
Cara pembuatan efek zom gambar pada suatu postingan denga secara otomatis :
1. buka blog anda lalu klik desain untuk menuju dashboard blogger
2. lalu pilih Template dan klik edit HTML
3. cari kode ini ]]></b:skin> di dalam template anda
4. lalu copy kode di bawah ini dan taruh / pastekan di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Jhon Thani
zoom gambar otomatis ini akan membantu pembaca untuk memahami panduan artikel yang sedang di pelajarinya.
Membuat efek zom gambar otomatis membantu pengunjung untuk lebih jelas menyerap apa yang sedang di baca pada artikel tersebut dan jika kalian ingin membuatnya silahkan simak artikel ini sampai selesai dan cara pembuatanyapun sangat mudah dan simpel hanya menambah kan sedikit kode kedalam HTML emplate blog.
Cara pembuatan efek zom gambar pada suatu postingan denga secara otomatis :
1. buka blog anda lalu klik desain untuk menuju dashboard blogger
2. lalu pilih Template dan klik edit HTML
3. cari kode ini ]]></b:skin> di dalam template anda
4. lalu copy kode di bawah ini dan taruh / pastekan di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
5. setelah selesai meletahkan kode di atas lalu klik pratinjau dulu gunanya untuk mencegah eror pada template anda.
6. jika sudah klik pratinjau dan hasilnya tidak eror lalu simpan Template anda
7. selesai..
dan silahkan cek hasilnya caranya bukalah postingan anda yang ada gambarnya lalu taruh krusor / mouse di atas gambar / tidak usah di klik hanya di taruh saja jika sudah benar maka gambar pun akan otomatis menjadi besar
Demikain tutorial Blogger wonogiri tentang cara membuat zoom gambar otomatis.
Komentar
Jhon Thani
No comments:
Post a Comment