Cara Memperlihatkan Efek Keren Pada Gambar Postingan Blogger

Selain itu, gambar Harus memperbanyak keyword artikel dengan menambahkan alt dan title didalamnya, penggunaan gambar juga Harus menciptakan artikel lebih berbobot dan tidak membosankan tentunya.

Kembali ke judul, pada artikel kali ini aku akan memperlihatkan sedikit tutorial bagaimana cara menciptakan imbas yang menarik pada gambar di postingan blogger.

Coba lihat pada gambar ini, terdapat watermark di bab kanan bawah. Mungkin sahabat pikir watermark tersebut dibentuk secara manual.

Watermark Otomatis Pada Gambar Postingan Blogger

Salah, watermark tersebut muncul secara otomatis pada gambar dengan memakai trik CSS :before atau Harus juga memakai :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 imbas bounce, shake Dan watermark

Ganti MASIH TERJAGA dengan nama Blog atau nama Sobat.

Gambar Blogger dengan Watermark Otomatis

Agar imbas watermark Harus berfungsi, sahabat harus membungkus script gambar dengan kode

<div class='watermark'>

Sehingga arahan penerapan gambar pada postingan sahabat menjadi menyerupai ini:

<div class='watermark'> <img src="/img/Efek-Kern-Gambar-Blog.png" alt="Cara Membuat Efek Keren Di Gambar Blogger Cara Memberikan Efek Keren pada Gambar Postingan Blogger" title="Cara Memberikan Efek Keren pada Gambar Postingan Blogger"/> </div>

Tutorial ini sangat singkat, kalau ingin membaca yang lebih terperinci sahabat Harus membaca artikel dari alinuxblog dengan judul Membuat "Watermark" Otomatis pada Image Artikel di Blogger

Gambar Dengan Efek Shake on Hover

Caranya sama menyerupai menciptakan watermark otomatis, namun kodenya menyerupai ini

<div class='goyang'> <img src="/img/cara-menambahkan-efek-keren-pada-gambar.jpg" alt="Cara Membuat Efek Keren Di Gambar Blogger Cara Memberikan Efek Keren pada Gambar Postingan Blogger" title="Cara Memberikan Efek Keren pada Gambar Postingan Blogger"/> </div>

Gambar Dengan Efek Bounce on Hover

Sedangkan untuk menciptakan imbas bounce pembungkus gambar yang dipakai menyerupai ini

<div class='mantul'> <img src="/img/cara-membuat-efek-keren-pada-gambar-blog.jpg" alt="Cara Membuat Efek Keren Di Gambar Blogger Cara Memberikan Efek Keren pada Gambar Postingan Blogger" title="Cara Memberikan Efek Keren pada Gambar Postingan Blogger"/> </div>

Jika berhasil akibatnya akan menjadi menyerupai ini

Cukup gampang bukan? Selamat Mencoba…
()