Zoom Image Buat Blogger-Selamat sore,sudah lama sekali saya nggak update,karena banyak sekali kesibukan di dunia nyata maka ngeblogpun jadi terabaikan,tapi nggak apa-apalah saya ngeblog hanya mengisi luang waktu saja.namun bagi para sahabat blogger mohon maaf sebelumnya,kalau saja ada komentar atau yang berkunjung ke sini dan belum sempay saya bales kunjungannya.
 |
| Demo |
Ok pada hari ini saya akan memberikan tutorial tentang pembuatan Zoom Image Buat Blogger,yang mana kode ini bisa disimpan di HTML blog sobat,sebenarnya sudah banyak yang menulis tetang cara ini.Tapi nggak apa-apalah,karena saya susah sekali cari artikel,apalagi artikel original males mikirnya,walaupun tutorial ini dapat copas,namun mudah-mudahan saja bisa bermanfaat bagi yang membutuhkan dan ingin memasangnya biar blognya kelihatan cantik.
Yuk kita langsung saja ke cara pembuatannya.
- Masuk blogger >>> Rancangan >>> edit HML.
- Cari kode berikut ,]]></b:skin>
- Dan simpan kode berikut di atasnya.
.post img{transition:all 1.2s ease-out;-o-transition:all 1.2s ease-out;-moz-transition:all 1.2s ease-out;-webkit-transition:all 1.2s ease-out}.post img:hover{z-index:99;transform:rotate(-10deg) scale(1.4) translate(5px,-3px);-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);box-shadow:0 3px 6px rgba(0,0,0,.5)}
Atau kode yang di bawah.
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
Atau kode yang di bawah.
.post img{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover{
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-ms-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
Nah itulah cara membuat efek poto membesar untuk blog kita,dan untuk demo cari saja di blog-blog sobat lainnya soalnya template seo ini nggak support dengan widget zoom epeknya,cari saja pasti sudah banyak yang menggunakan cara ini.Nah itulah sedikit tutorial dari saya,hanya untuk mengisi postingan saja,jadi mohon maaf bila ada yang salah karena saya termasuk blogger newbie/baru.
Semoga bermanfaat.
