Menambahkan Efek "bump" di Gambar Pada Postingan

Efek bump itu seperti apa sih ? mungkin itulah pertanyaan yang ada di kepala kalian. Yap efek bump itu sendiri seperti saat kita menyorot sebuah gambar, maka gambar tersebut akan naik atau loncat. Untuk lebih jelasnya mungkin kamu bisa lihat demonya disini. Oke langsung saja jika kamu tertarik ikuti langkah di bawah ini untuk membuatnya.

1. Masuk ke Blogger.com

2. Klik Rancangan --> Perancang Template (template designer) --> Tingkat Lanjut (advance) --> Tambahkan CSS (add CSS).

3. Salin kode di bawah ini dan masukkan ke dalam kotak CSS yang sudah kita buka tadi.

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

NOTE : kode yang berwana biru adalah warna border, bisa kamu ganti sesuka kamu dengan kode warna html yang lainnya.

3. Simpan Template.

4. Kemudian, jika kamu mengupload gambar pada postingan kamu, klik Tab Edit HTML yang letaknya di samping Tab "Compose". Contoh suatu gambar memiliki kode HTML seperti berikut :

<div class="separator" style="clear: both; text-align: center;">
<a  href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JTkt8FDgEAX7Lu5EaXH9zTjiG-GyCG6RMw1OFsrYbA2hjd5hN292XzHbwjqML-wY6VhPzLp5SxAcbmdT8a-dalKL2951PkMSNrWLf4aR-0nN2pARatLOo7duls49TDp9sS8kyDn6SRwV/s1600/Chrysanthemum.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JTkt8FDgEAX7Lu5EaXH9zTjiG-GyCG6RMw1OFsrYbA2hjd5hN292XzHbwjqML-wY6VhPzLp5SxAcbmdT8a-dalKL2951PkMSNrWLf4aR-0nN2pARatLOo7duls49TDp9sS8kyDn6SRwV/s320/Chrysanthemum.jpg" width="320" /></a></div>

Yang kamu lakukan hanya menambahkan kode class="gobump" di tengah-tengah kode <a href =".. Sehingga kode akan berubah menjadi seperti ini.

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump"  href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JTkt8FDgEAX7Lu5EaXH9zTjiG-GyCG6RMw1OFsrYbA2hjd5hN292XzHbwjqML-wY6VhPzLp5SxAcbmdT8a-dalKL2951PkMSNrWLf4aR-0nN2pARatLOo7duls49TDp9sS8kyDn6SRwV/s1600/Chrysanthemum.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JTkt8FDgEAX7Lu5EaXH9zTjiG-GyCG6RMw1OFsrYbA2hjd5hN292XzHbwjqML-wY6VhPzLp5SxAcbmdT8a-dalKL2951PkMSNrWLf4aR-0nN2pARatLOo7duls49TDp9sS8kyDn6SRwV/s320/Chrysanthemum.jpg" width="320" /></a></div>

5. Bagaimana ? Mudah bukan ?

Postingan Terkait:

Posted in: Blogger