Zoom In Image Effect Responsive Blogger

Menambahkan effect zoom in image / gambar dalam sebuah posting blog merupakan sebuah kreasi yang akan menambah nuansa tersendiri bagi para penggemar dunia blog. disini kami hadirkan tutorial sederhana tentang effect zoom in image.

Letakkan css style dibawah ini pada kerangka blog tepat diatas @media screen and pertama.

/* Zoom Image */

.sd img{

-webkit-transform:scale(0.4);

-moz-transform:scale(0.4);

-o-transform:scale(0.4);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;}

.sd img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;}

SAVE template.
kemudian panggil css style yang sudah diletakkan pada kerangka template tadi pada entri posting.

<center>

<a class="sd" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ2sEJxLRPQWJpK2zZ_OZifyUdqca2Tq4K-MsXrlSXaYqsoBTHYoh6EoiRUWUD5w7XJc7757wJSrCsAxX1_l8P6EVFO6PWNa410B_rjwpuCMuh0WTeSPLAMvPjAW_gSrCh6JgpaRlQmq4/s1600/zoom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Zoom Image Effect Responsive Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ2sEJxLRPQWJpK2zZ_OZifyUdqca2Tq4K-MsXrlSXaYqsoBTHYoh6EoiRUWUD5w7XJc7757wJSrCsAxX1_l8P6EVFO6PWNa410B_rjwpuCMuh0WTeSPLAMvPjAW_gSrCh6JgpaRlQmq4/s480/zoom.jpg" title="Zoom Image Effect Responsive Blogger" /></a>

</center>

ganti url diatas dengan url image / gambar blog kamu.

Result

Demikian tutorial sederhana tentang menambah effect zoom in image / gambar pada entri posting blog, jika kurang dipahami silahkan tinggalkan pesan.