Skip to main content
WARIM

follow us

Membuat Gambar Membesar Saat Tersentuh Kursor

Pada kesenpatan kali ini saya akan coba 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

You Might Also Like:

Buka Komentar