KODE IKLAN DFP 1 Cara Memperlihatkan Efek Keren Pada Gambar Postingan Blogger | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Memperlihatkan Efek Keren Pada Gambar Postingan Blogger

    KODE IKLAN 200x200
    KODE IKLAN 336x280
    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.

    Cara Membuat Efek Keren Di Gambar Blogger Cara Memberikan Efek Keren pada Gambar Postingan Blogger
    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…
    ()
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2