Membuat Gambar Membesar Saat Tersentuh Kursor

Pada waktu yang lalu saya sudah posting tentang Cara Membuat Gambar Postingan Berputar Dan Membesar Saat Tersentuh Kursor Dan Pada kesenpatan kali inu saya akan posting mengenai Cara Membuat Gambar Membesar Saat Tersentuh Kursor. Mungkin anda sudah sangat sering melihat di blog-blog lain kalo gambar di sentuh kursor maka gambar akan membesar (Zoom) Seperti di blog Kompi Ajaib.

Nah disini anda juga bisa membuat agar gambar di blog anda juga bisa membesar saat di sentuh kursor. jika anda ingin membuat nya, mari ikuti langkah mudah nya di bawah ini. Untuk Membuat Mambar Membesar Saat Tersentuh Kursor kita hanya menambahkan CSS saja pada Template blog anda, Dan tanpa javascript. Sehingga loading blog kita tidak terasa berat.

1. Pertama Anda masuk akun blogger anda.

2. Di Dasbor blog, pilih menu kemudian klik Tempate terus Edit HTML
3. Kemudian letakkan kode di berikut ini di atas </head>

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post-thumbnail{float:left;margin:0;padding:0;width:90%;overflow:hidden}
.post-thumbnail img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:0;position:static;transition:all .8s ease-out;border-radius:5px !important;overflow:hidden}
.post-thumbnail img:hover{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
</b:if>
</b:if>


Dan sekekarng Klik simpan. Dan coba anda lihat di Homepage (Beranda) blog anda dan arahkan kursor pada gambar.

PERHATIAN: Apabila anda sudah mengikuti cara di atas tetapi tidak berfungsi (Gambar masih Tidak Membesar) silahkan Ganti .post-thumbnail Sesuai struktur pada template anda. karana setiap template memiliki struktur yang berbeda-beda.

Cukup sampai di sini postingan Cara Membuat Gambar Membesar Saat Tersentuh Kursor Selamat mencoba.

Sumber: KompiAjaib.com

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser