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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger