Image Hover Effect

Salam & Selamat Sejahtera semua..

Kali ini aku nak kongsikan 1 godek yang agak sempoi dan bergaya iaitu 'Image Hover Effect'. Jika korang masih blur, cuba korang arahkan mouse korang kat gambar awek aku di bawah.



Ok.. jom godek.

1) Pergi ke Layout > Edit HTML

2) Cari kod </head>

3) Kemudian copy kod di bawah dan paste di atas </head> tadi.

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>


Save template korang.

Jika korang nak menjadikan image di entri korang seperti di atas, korang kena tambahkan sedikit kod di dalam entri korang itu.(Edit HTML mode)
Apabila korang sudah upload gambar, korang akan nampak kod seperti di bawah:-

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s1600-h/fazura5jpg.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s400/fazura5jpg.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5344603650715954722" /></a>


Apa yang korang perlu buat ialah masukkan kod ini class=linkopacity sebelum kod ini href="http://4.bp.blogspot.com/_My4fAPyVeIc/SivYtBIuLiI/AAAAAAAAAe4/7taiqwWENSE......

Dan akan jadi seperti di bawah:-

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" class=linkopacity href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s1600-h/fazura5jpg.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s400/fazura5jpg.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5344603650715954722" /></a>


Selamat mengodek...

p/s: aku minat giler Fazura ni...heheheheh

Image Hosted by ImageShack.us

4 comments:

Post a Comment