Shake and Shadow Image Effect Responsive Blogger

Menambahkan effect shake / goyang dan shadow / bayangan pada image / gambar dalam sebuah posting blog merupakan sebuah kreasi yang akan menambah nuansa berbeda bagi para penggemar dunia blog. disini kami hadirkan tutorial sederhana tentang effect shake / goyang image.
Letakkan css style dibawah ini pada kerangka blog tepat diatas @media screen and pertama.

/* Shake Responsive */

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

.sds 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;}

.sds img:hover {

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

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

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

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

<center>

<a class="sds" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipaieqkiGV2zjleTEK1S0KcFM2rN2rnpoP0T9bIv8MzZ3MRv-G135r1UAA1DcV-TYPzFVpxJ49FupF45L0QmXT6ngfmowA4KZYCMQZepPtUL65Kncgh4YEJDb4HxqybtSgsxUP_9s2a7Y/s1600/shake1.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/AVvXsEipaieqkiGV2zjleTEK1S0KcFM2rN2rnpoP0T9bIv8MzZ3MRv-G135r1UAA1DcV-TYPzFVpxJ49FupF45L0QmXT6ngfmowA4KZYCMQZepPtUL65Kncgh4YEJDb4HxqybtSgsxUP_9s2a7Y/s400/shake1.jpg" title="Zoom Image Effect Responsive Blogger" /></a>

</center>

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

Result

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