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 Efek Zoom Pada Gambar:



Cara membuat Efek Zoom Berputar Pada Gambar di blog

Membuat Efek Zoom Pada Gambar

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="http://1.bp.blogspot.com/-HNupHWTQXiY/U_yUUuASJsI/AAAAAAAACFM/e10mVgJtajE/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. Nah sekian artikel untuk saat ini dan jangan lupa lihat artikel terbaru seocips yang lainnya atau follow blog ini untuk memudahkan sobat mendapatkan artikel terbaru dari www.seocips.com.
9 Komentar untuk "Membuat Efek Zoom Berputar Pada Gambar di Blog"

keren oi bisa di coba nih, tapi memberatkan loading blog nggak om...

Menurut saya biasa aja gan. ayo ngopy panas dulu gan (c)

setelah edit #seocips img menjadi .post img baru bisa muter....
hahahaha...................apik tenan kang................matur nuwun...... jooss....

Iya gan, kalau kita ingin membuat otomatis semua gambar postingan berputar bisa dipasang di .post img tapi kalau hanya gambar yang diinginkan saja bisa pakai cara diatas.

ko gx bisa gan..??"
apa cara No.4 juga termasuk gan...???"
atau cuma sampe cara no.3 aja,,??

artikel ini memberikan ilmu ilmu baru tentang zoom gambar... terima kasih banyak gan.. bermanfaat sekali.

http://miniblogger28.blogspot.com

Iya gan untuk no 4 adalah cara penerapannya. Jika ingin menerapkan ke seluruh gambar artikel postingan blog, pada langkah ke 3 diatas ganti saja kode #seocips img dengan .post img dan masukan kedalam template.

terima kasih...saya coba terapakn...smg berhasil.
mampir bos......