Cara Memberikan Efek Pada Gambar Blogger

Cara Memberikan Efek Keren pada Gambar Postingan Blogger
Daftar Isi Artikel []
Cara Membuat Efek Keren(Watermark, Shake, Bounce) Pada Gambar Blogger - Penggunaan gambar di postingan blog sangatlah penting, gambar bisa berfugsi sebagai penjelas sebuah kalimat(topik) yang tidak cukup jika hanya dijelaskan dengan kata kata.
Selain itu, gambar bisa memperbanyak keyword artikel dengan menambahkan alt dan title didalamnya, penggunaan gambar juga bisa membuat artikel lebih berbobot dan tidak membosankan tentunya.

Kembali ke judul, pada artikel kali ini saya akan memberikan sedikit tutorial bagaimana cara membuat efek yang menarik pada gambar di postingan blogger.

Coba lihat pada gambar ini, terdapat watermark di bagian kanan bawah. Mungkin sobat pikir watermark tersebut dibuat secara manual.
Cara Membuat Efek Watermark Otomatis Di Gambar Blogger
Watermark Otomatis Pada Gambar Postingan Blogger

Salah, watermark tersebut muncul secara otomatis pada gambar dengan menggunakan trik CSS :before atau bisa juga menggunakan :after.

Cara Membuat Efek Menarik pada Gambar Blogger

Seperti biasa, buka Menu Template > Edit HTML

Kemudian Paste CSS dibawah ini sebelum </head> pada template sobat.
<style>
.watermark{position:relative}.watermark::before{content:"MASIH TERJAGA";color:black;font-size:14px;position:absolute;right:10px;bottom:10px;border:1px solid #000;background-color:#fff;padding:4px;opacity:.4;height:14px;line-height:14px}.goyang:hover{animation:shakeOf .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}.mantul{margin:10px 0}.mantul:hover{animation:bounceOn .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000em}@keyframes shakeOf{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@-webkit-keyframes shakeOf{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@keyframes bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}@webkit-keyframes bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}
</style>

CSS tersebut sudah termasuk efek bounce, shake Dan watermark
Ganti MASIH TERJAGA dengan nama Blog atau nama Sobat.

Gambar Blogger dengan Watermark Otomatis

Agar efek watermark bisa berfungsi, sobat harus membungkus script gambar dengan kode
<div class='watermark'>

Sehingga kode penerapan gambar pada postingan sobat menjadi seperti ini:
<div class='watermark'>
<img src="/img/Efek-Kern-Gambar-Blog.png" alt="Membuat Efek Keren Gambar Blog" title="Efek Pada Gambar Blog"/>
</div>

Tutorial ini sangat singkat, jika ingin membaca yang lebih jelas sobat bisa membaca artikel dari alinuxblog dengan judul Membuat "Watermark" Otomatis pada Image Artikel di Blogger

Gambar Dengan Efek Shake on Hover

Caranya sama seperti membuat watermark otomatis, namun kodenya seperti ini
<div class='goyang'>
<img src="/img/cara-menambahkan-efek-keren-pada-gambar.jpg" alt="Cara Membuat Efek Keren pada Gambar" title="Cara Membuat Efek Keren pada Gambar"/>
</div>

Gambar Dengan Efek Bounce on Hover

Sedangkan untuk membuat efek bounce pembungkus gambar yang digunakan seperti ini
<div class='mantul'>
<img src="/img/cara-membuat-efek-keren-pada-gambar-blog.jpg" alt="Cara Mempercantik Gambar Postingan Blog" title="Cara Membuat Gambar Blog Menjadi Lebih Menarik"/>
</div>

Jika berhasil hasilnya akan menjadi seperti ini


Cukup mudah bukan? Selamat Mencoba…