Cara Membuat Efek Bumping Pada gambar di Blog

Memberikan efek menarik pada gambar di blog menggunakan format CSS mungkin merupakan salah satu tips atau cara yang sering digunakan untuk mempercantik tampilan suatu blog. Mungkin di antara kita pernah mengunjungi suatu blog dan pada saat mengarahkan kursor mouse pada gambar tersebut maka akan muncul sebuah efek seperti berputar, melengkung, bergetar, bergerak ke samping, dll.

Sebagaimana kita ketahui bahwa CSS tidak membuat loading pada blog kita menjadi berat namun kode-kode tersebut dapat mengubah tampilan blog kita semakin terlihat menarik, sehingga tidak ada salahnya juga bila kita mencoba menerapkannya efek gambar tersebut pada blog kita. Dan berikut ini adalah salah satu efek gambar yang dapat diterapkan pada suatu blog dengan menggunakan kode CSS yaitu dengan membuat "Efek Bumping (membuat gambar bergerak ke atas ketika diarahkan/disorot mouse)". Untuk lebih lanjut tentang bagaimana cara membuat efek ini, silahkan perhatikan langkah-langkah berikut ini :

Langkah-langkah pada Template (Edit HTML):

Masuk ke akun blog kalian (Dashboard)
Setelah itu pilih bagian Template » Edit HTML
Kemudian carilah kode <head> pada halaman HTML tersebut dengan cara menekan tombol CTRL + F (Searching)
Setelah menemukan kode tersebut, sekarang salin/copy kode di bawah ini dengan meletakkannya tepat berada di bawah kode <head>

<style type="text/css"> .mode7{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .mode7:hover{ -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,10px); transform:translate(0px,-10px); } </style>
Simpan Template.

Setelah menyisipkan Kode CSS tersebut maka langkah selanjutnya ialah bagaimana cara memasang gambar pada sebuah postingan. Untuk lebih memahaminya berikut ini adalah penjelasan tentang penyisipan kode khusus didalam postingan :

Langkah-langkah penulisan kode pada sebuah postingan :

Buat entry baru
Sisipkan kode di bawah ini dan isi dengan URL gambar yang kalian inginkan. Hal ini dilakukan agar efek gambar tersebut dapat berkerja :

<img class="mode7" src="ISI DENGAN URL GAMBAR" />
Seperti contoh berikut ini adalah URL gambar yang telah saya sisipkan diantara kode yang tertera diatas :
<img class="mode7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYewbUfAefhZ86X8HV7CpjfbTNbcBpLz48izNDBUi3r-YMCUsvpUCFchti-fMvJcnWh_DgFWhzVVAS9sQNoLa3D6IhTaFKFtsuYvRnIeD7LgBcSjwjnE-btfgYNcafOFJyJQq0FaMVFjHq/s1600/Contoh+Gambar.jpg" />
Keterangan : Ubahlah tulisan berwarna merah tersebut dengan URL/Link Gambar yang kalian miliki.
Publish postingan tersebut dan lihatlah hasilnya. Jika kalian memperhatikan dan melalukannya dengan benar maka hasilnya akan seperti gambar di bawah ini :

(Arahkan kursor mouse pada gambar di atas)