Join US!

06 august 2011

Blog - Hover opacity effect pentru imagini in Blogger

Poate ati vazut pe multe bloguri Wordpress acest efect, dar nici o data pe Blogger. Acum lucru este posibil si pe Blogger datorita unui truc facut de Bloggerstop. Pentru a va face o idee despre cum arata acest efect miscati mouse-ul deasupra imaginilor de mai jos. Daca va place si vreti asa ceva pe blog iata ce trebuie sa faceti. Urmati calea Aspect --> Editati Html si gasiti (Ctrl+F) acest cod: </head> Chiar inainte de el copiati codul de mai jos:
<!--Link-opacity-stars-->
<style type="text/css">


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


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


</style>
<!--Link-opacity-stop-->

Dupa ce ati adaugat codul salvati sablonul. Acum de cate ori vreti ca o imagine postata de voi sa aiba acest efect trebuie sa modificati putin codul imaginii prin adaugarea urmatorului cod. class="linkopacity"Deci daca codul html obisnuit al unei imagini arata asa:
<a href="http://bloggerajutor.blogspot.com"><img
 style="border: 0px solid ; width: 125px; height: 125px;"
 alt="Totul despre Blogger"
 src="http://i29.tinypic.com/2lw0z0x.jpg"></a>

noi trebuie sa il facem sa arate asa:
<a class="linkopacity" href="http://bloggerajutor.blogspot.com"><img
 style="border: 0px solid ; width: 125px; height: 125px;"
 alt="Totul despre Blogger"
 src="http://i29.tinypic.com/2lw0z0x.jpg"></a>

si asta-i not!