Membuat Efek Zoom Berputar Pada Gambar di Blog

Efek Zoom Berputar Pada Gambar. Berikut ini seocips akan membagikan tutorial seputar Blog yaitu tentang Cara membuat efek zoom berputar pada gambar di postingan blog Blogger. Tentunya seperti yang telah saya jelaskan di beberapa postingan terdahulu bahwa untuk membuat blog kita kelihatan lebih menarik maka kita dapat menambahkan efek pada gambar blog.

Keuntungan menggunakan efek seperti ini seperti yang sudah saya katakan diatas adalah untuk membuat tampilan blog kita menjadi kelihatan lebih menarik, efek ini akan terlihat ketika kursor mouse diarahkan pada gambar di postingan blog kita.


Seperti di artikel pada sebelumnya dimana saya telah membagikan tentang cara membuat efek rotasi pada gambar dengan CSS tanpa Jquery. Efek berikut ini juga sobat tidak perlu menggunakan jquery. Jika sobat tertarik dengan efek blog maka sobat dapat melihat artikel seperti wow slider with thumbnails atau juga image slider versi 6 dan animasi gelembung di blog. Untuk Live demo Efek Zoom Berputar adalah seperti pada gambar dibawah ini.
LIVE DEMO:

Untuk membuatnya berikut ini adalah Cara Membuat Efek Zoom Berputar Pada Gambar di Blog:
1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). saran saya diatas kode ]]></b:skin>.
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin> atau </style>

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

4) Untuk menerapkannya pada postingan blog contohnya adala kode di bawah ini, dalam mode HTML postingan.
 

<div id="seocips">
<div style="text-align: center;">
<a href="http://www.seocips.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJyQ72iJb2I8OIqyysKYlloY6VZGthhrQ8xKWD66IWyJamJyYOpFEv2jzPFCgBYOZuLKYmgHaVMH14BSWqmPWb8MySC7pEr-FWGAL5RNeadlIDG1LmkX1gqFwgWKk9HTB6z8021wz-mk/s1600/Seocips-efect-blog.jpg" height="200" width="200" /></a></div>

 Untuk kode berwarna merah diatas adalah url gambar, slihakan ganti dengan gambar yang sobat inginkan. sekarang tinggal sobat publikasikan artikel sobat dan lihat hasilnya pada gambar sobat.