Blog Resimlerine Hover Özelliği Verme

Bloggerda yerleştirdiğiniz resimlere link verdiğinizde bu resimlerin  efekli bir şekilde göründürerek blogunuzda farklılık kazandırabilirsiniz.

Adım adım hover efeğini yapalım

1. Blogunuza giriş yapıp sol menüdeki şablonlar kısmına girip html ile ayarlama kısmına girin. 

2. </ head> tagını bulun.
3. Aşağıdaki kodu </ head>  tagnın altına yerleştirin.
<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>

4.Şablonu kaydedin. Bundan sonra aşağıdaki kodu kullanarak resimlere efek verebiliriz
Kullandıımız bu kod
<a href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>
Aşağıdaki koda dönüştürebiliriz.
<a class="linkopacity" href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>


linkopacity eklentisi ile resimler artık hover özelikli...

Örnek:<a class="linkopacity" href=" http://bloggerblogum.blogspot.com" target="_blank" alt="Blogger Destek"><img src="http://c1206.hizliresim.com/y/x/8xt32.jpg"/></a>
Bu kodu metin yazarken html sistemine yerleştirin.