4 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.

Tentang Penulis :

Terima Kasih Telah Mengunjungi Blog Saya. Semoga artikel yang saya bagikan bisa bermanfaat, kurang lebihnya mohon dimaafkan karena saya juga masih dalam proses belajar. Jangan lupa Follow Facebook, Twitter dan juga Google+ di bawah ini ya.
Previous Page Next Page Home

Kebijakan Komentar :Silahkan berkomentar tentunya dengan komentar yang sifatnya membangun. Dilarang Spam, memberikan link aktif. Bagi yang mau berkomentar saya mengucapkan terima kasih banyak, karena mengisi kolom komentar merupakan kebanggaan tersendiri bagi penulis.

4 komentar:

  1. mf bru di reply....
    di bagian mna gak ngerti nya gan??

    BalasHapus
  2. SAYA BINGUNG KOK GK ADA kode ]]>

    BalasHapus
    Balasan
    1. untuk pencarian gunakan CTRL + F
      klo kode ]]> tidak ditemukan berarti template blog agan,,merupakan hasil dri modifikasi..
      coba cari dengan kata pencarian skin..

      Hapus

Silahkan Berikan Komentarnya di Bawah ini....!!!!!

Top