Cara Membuat Gambar Membesar Saat Terkena Cursor

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Selamat sore sobat blogger . Kali ini saya kembali akan membahas mengenai tutorial blog yaitu cara membuat gambar membesar saat terkena cursor mouse . Sobat pasti pernah melihat artikel dengan gambar yang akan membesar saat disentuh cursor mouse seperti pada blog anas tips dan juga kompi ajaib . Sobat pasti tertarik untuk membuatnya bukan ?

Saya juga pada awalnya sangat tertarik dengan post thumbnail yang seperti ini dan akhirnya saya mengulik-ulik template blog saya dan akhirnya berhasil saya dapatkan scriptnya . Nah kali ini saya akan membagikan tutorialnya kepaa sobat serta agan-agan sekalian yang tertarik menggunakan post thumbnail seperti ini .

Oke ikuti langkah-langkahnya :

1.Masuk ke blogger.com -> template lalu klik edit HTML

2.Letakkan kode berikut diatas </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>

3.Silahkan sobat simpan template dan lihat hasilnya .

Pada umumnya semua template itu berbeda struktur terutama pada thumbnail ini , namun yang paling umum digunakan ialah post-thumbnail . jika cara diatas tidak berhasil maka silahkan sobat cari struktur atau id gambar thumbnail pada template sobat dan ganti post-thumbnail pada kode diatas dengan id thumbnail sobat .

Animasi seperti itu dapat terlihat pada halaman homepage maupun full pages dan sangat menarik terlebih lagi untuk gambar template .

Bagaimana? Mudah bukan ? itulah tadi cara meletakan animasi gambar membesar saat terkena cursor pada blog , semoga bermanfaat bagi semua .
Jika sobat mengalami masalah atau pertanyaan seputar tutorial kali ini silahkan sobat tuliskan pada kolom komentar  ,terimakasih ..

Tag : Adsense, Blog, Download Gratis, Pendidikan, SEO