Se afișează postările cu eticheta Imagini. Afișați toate postările
Se afișează postările cu eticheta Imagini. Afișați toate postările

joi, 13 august 2009

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 e tot.