Rotate 360 and Shadow Image Effect Responsive Blogger

Menambahkan effect rotate / memutar dan shadow / bayangan pada image / gambar yang akan membuat sebuah image / gambar akan memutar 360 derajat dalam sebuah posting blog dan akan menambah nuansa berbeda bagi para penggemar dunia blog. disini kami hadirkan tutorial sederhana tentang rotate / memutar image.

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

/* Shake Responsive */

.sdr {width: 320px; margin: 0 auto;}

.sdr img {margin: 30px; border: 5px solid #eee;

-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;}

.sdr img:hover {

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-o-transform: rotate(-360deg);}

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

<center>

<a class="sdr" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1xi0o6TS-TnsucpjRgHrDkTDf2za71e5Q5Ik4o-TjR7tn_K848CcZWBJubXs641ySouqAE-dohcVk_XpfBHmLOFcUv3wrPJ1bhPWdlj6fyiFhAR_HtOu3YYyfj9qQ5MhFGWSGpZPyuE/s1600/shake4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rotate 360 and Shadow Image Effect Responsive Blogger" border="0" data-original-height="768" data-original-width="1360" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1xi0o6TS-TnsucpjRgHrDkTDf2za71e5Q5Ik4o-TjR7tn_K848CcZWBJubXs641ySouqAE-dohcVk_XpfBHmLOFcUv3wrPJ1bhPWdlj6fyiFhAR_HtOu3YYyfj9qQ5MhFGWSGpZPyuE/s400/shake4.jpg" title="Rotate 360 and Shadow Image Effect Responsive Blogger" width="400" /></a>

</center>

Ganti url image pada css style diatas dengan url image posting kamu.

Result

Demikian tutorial sederhana tentang menambah effect rotate / memutar dan shadow / bayangan pada image / gambar pada entri posting blog, jika kurang dipahami silahkan tinggalkan pesan.