Cara Membuat Gambar Membesar Saat Dilewati Kursor di Blog
Cara Membuat Gambar Membesar Saat Dilewati Kursor di Blog - Diantara sekian ribu blog yang pernah anda kunjungi pasti anda sempat menemui entah itu sengaja maupun tidak, blog yang gambarnya membesar ketika dilewati kursor. Oleh sebagian orang hal tersebut dapat memperindah blog, namun tidak sedikit yang berasumsi bahwa efek -efek zoom- seperti itu hanya mengganggu saja. Apapun alasannya, tersedah anda. Entah itu membuat nyaman atau tidak, itukan selera anda. Baiklah melalui postingan ini saya akan berbagi cara membuat gambar membesar ketika dilindas atau disambar kursor. Berikut caranya.
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML > Centang Expand Template Widget.
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
(Gunakan CTRL+F untuk memudahkan pencarian)
.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}
4. Kemudian Save Template.
Apakah dah selesai ? Belum. Masih ada kode lagi nih yang ketinggalan.
Masukan kode berikut dengan cara Rancangan > Tambah Gadget > Pilih HTML/Java Script
<div class="cayunhover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRxttfcvBvAXlib4srWCh6dIv0_qNwgiOGBD8VU_kH1RJD-17uEw1UcqIR2plXpGjyHOPd4Z8CreNlIU0q8HrCRVebQbmJhW8YpmX93GWhLKbrGWHfKowGTGMKHfYXRvM5M8a9fG7Gz4/s1600/blogger-logo%5B2%5D.png"/>
</div>
Ket.
* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRxttfcvBvAXlib4srWCh6dIv0_qNwgiOGBD8VU_kH1RJD-17uEw1UcqIR2plXpGjyHOPd4Z8CreNlIU0q8HrCRVebQbmJhW8YpmX93GWhLKbrGWHfKowGTGMKHfYXRvM5M8a9fG7Gz4/s1600/blogger-logo%5B2%5D.png bisa Anda ganti dengan gambar yang lain.
Selamat Mencoba ?!!
No Comment to " Cara Membuat Gambar Membesar Saat Dilewati Kursor di Blog "