Membuat Animasi Bergerak pada Gambar Postingan

Ketika anda berkunjung ke blog cooltricksntips, anda akan menemukan sebuah gambar yang jika mouse anda dekatkan padanya, dia akan bergerak. Lebih tepatnya bergoyang. Sebenarnya cara membuatnya sangat simple. Anda hanya perlu menambahkan sedikit kode css pada template anda, dan ketika posting image/gambar anda tinggal bubuskan sebuah kode class id pada gambar tersebut. Bingung? Oke, mari kita praktek langsung membuat animasi bergerak pada gambar posting.


Yang pertama anda lakukan, backup terlebih dahulu template anda. Kemudian ikuti langkah berikut ini untuk membuat animasi bergerak gambar postingan.
1. Masuk ke Edit Html pada Design blogspot anda.

2. Copy kode berikut dan letakkan sebelum kode ]]></b:skin>

<style type="text/css">.bordersp {-webkit-transition:  -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform:  rotate(+2deg);-moz-transform: rotate(+2deg);}.bordersp:hover {-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform:  rotate(-1deg);-moz-transform: rotate(-1deg);}</style>

3. Ketika anda hendak posting image kedalam artikel bubuhkan kode berikut pada bagian edit htmlnya.

<img alt="Keyword Image Anda" border="0" class="bordersp" src="URL Image Anda"/></a>

Selesai. Silahkan anda lihat hasilnya. Sebenarnya anda hanya perlu menambahkan kode " class="bordersp" saja setiap kali anda memasukkan image, maka gambar anda pun akan bisa bergerak.
Selamat mencoba.

Share on Google Plus

About Dadan Pauzan

Kami merupakan salah satu komunitas yang hobi menulis artikel di blog, main game, ngoding, edit musik dan membuat video.