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.
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 HTMLKemudian 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…
()
Advertisement