Membuat Gambar Berputar Dengan Efek Zoom

     Membuat Gambar Berputar Dengan Efek Zoom - Berikut ini saya bagikan tutorial seputar blog yaitu tentang cara membuat efek zoom berputar pada gambar di postingan blog. Kegunaannya adalah untuk membuat tampilan blog kita menjadi kelihatan lebih keren, efek ini akan terlihat pada saat kursor mouse diarahkan pada gambar di postingan artikel kita.

Baca juga : Cara Membuat Gambar Melayang di Sudut Blog

Untuk Live demonya arahkan kursor mouse pada gambar dibawah ini.
LIVE DEMO:
Contoh 1

Contoh 2

Untuk membuat efek rotasi zoom tersebut ikuti Langkah-langkah yang tutorwidget berikan berikut ini dengan mudah:
1) Masuk ke dashboard blogger, cari Template >> Edit HTML.
2) Cari kode ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). saran saya diatas kode ]]></b:skin>.
3) CopyPastekan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

#tutorwidget 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;}
#tutorwidget img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

4) Lalu Klik Simpan.
5) Untuk menerapkannya pada postingan artikel adalah kode di bawah ini, dalam mode HTML.

<div id="tutorwidget">
<div style="text-align: center;">
<a href="http://tutorwidget.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17xeixMhR2B9YXahEFhWvfkM3_3KySCT1RhoH3lkFnXdWolLneiRie9tqmU7wNqPs0LosgEXMAYRbFvGohOVdmpWeh2rIMD0lTYxuk3BPDXoM3tVxJQps-oYv_f_IAmfHGhVQN58kC34B/s128-no/loading.GIF" height="200" width="200" /></a></div>

#NB : Ganti warna Merah dengan URL (Link dan Gambar) yang sobat inginkan.

     Sekarang bisa anda coba pada postingan artikel atau pada gambar-gambar di blog yang sobat punya dan lihat hasilnya pada gambar tersebut.