Sunday, July 3, 2011

Menambahkan CSS Simple Efek Bump Di Gambar

cara mudah css jquery pada gambar bumbPada kesempatan kali ini saya akan menuliskan kembali tentang widget , widget kali ini adalah widget efek bump pada gambar yang ada di blog anda . Efek ini cukup sangat keren bagi saya karena jika kita memberikan efek bumb ini pada gambar maka akan tampak seperti gambar itu ingin lari keatas.

Efek bumb ini akan bekerja jika kita menyorotkan cursor mouse ke bagian gambar yang telah diberi efek bumb , widget ini hampir sama dengan widget sharing is sexy . Nah untuk anda yang ingin melihat terlebih dahulu widget efek bumb ini , silakan anda klik dibawah ini

demo dari efek bumb

Bagaimana , anda tertarik dengan widget efek bumb pada gambar ini ?? jika tertarik maka ikuti langkah berikut ini :

1. Silakan anda masuk ke akun blog anda . Lalu masuk di bagian design > template designer > advanced > add css.

2. Pada menu Add css , copy paste kode css berikut ini dan letakkan di kolom css tersebut .
tempat pemasangan kode css





Kode CSS

.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}
.gobump img:hover {
margin-top: 2px;
}


3. Setelah anda melakukan langkah diatas , klik APLY TO BLOG.

Tapi tunggu dulu pekerjaan anda belum sampai disini saja pada pembuatan widget efek bumb ini karena sebelum efek bumb itu bisa muncul maka yang harus anda lakukan adalah meletakan kode css class="gobump" ini pada gambar yang ingin anda beri efek bumb. Caranya cukup mudah yaitu dengan cara , menyisipkan kode bumb setelah kode " <a " pada gambar yang ingin di beri efek bumb.

Berikut ini saya akan sedikir berikan contoh dimana kode tersebut disisipkan :


  • <a class="gobump" href="http://1.bp.blogspot.com/-e80rWh6hK7Q/ThALuhuezBI/AAAAAAAAAbI/2M71tcoktsg/s1600/GravityWell1-0.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="animasi bumb di gambar" border="0" height="150" src="http://1.bp.blogspot.com/-e80rWh6hK7Q/ThALuhuezBI/AAAAAAAAAbI/2M71tcoktsg/s200/GravityWell1-0.jpg" width="200" /></a>

Note : kode  yang berwarna merah adalah tempat dimana kode bumb disisipkan .

Bagaiman cukup mudah bukan membuat widget efek bumb ini , mungkin untuk artikel widget ini sampai disini dahulu , saya mengucapkan terima kasih banyak jika anda sudah membaca artikel ini . Untuk yang masih bingung dengan widget diatas ,silakan anda bisa bertanya dengan meletakkan komentar pertanyaan  anda dibawah ini.

7 comments:

  1. makasih sob udah berkunjung dan berkomentar

    ReplyDelete
  2. agak sedikit rumit, tapi harus dipraktekin nih.. thanks ya bang..

    ReplyDelete
  3. apa kah anda tidak melihat demonya , coba anda lihat demonya !!

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam