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.

6 comentarii:

  1. wow..din ce in ce mai interesant si pe intelesul tuturor..astia..mai..;;) ca mine asa..pentru ca daca nu dadeai aici pe post "mura-n gura"..plus amabilitatea unui blogger catalin ( sa-i dea Domnul de toate..:) )..in veci nu as fi inteles sau pricipit".So, multumesc din suflet lui si tie.apoi felicitari tie, pt traduceri,. lamuriri si tot ce ai postat aici..Bravo, man! You did a good job here..! Sper si in continuare sa nu lasi bloggari de ïzebliste..acestia ca mine:)
    O seara frumoasa si o Buna dimineata!..cu o cafea fierbinte si ce mai doresti tu pe langa ea..

    RăspundețiȘtergere
  2. unde trebuie sa introduc codul: class="linkopacity" , daca vreau sa am acest efect si in titlul blogului(in titlul blogului am pusa o poza) si nu gasesc unde e editata html

    RăspundețiȘtergere
  3. exista si alte coduri pentru a se putea obtine si altfel de efecte in afara de cel opac?

    RăspundețiȘtergere
  4. .... cv mai simplu ? cv mai unicat pentru poze ?
    sa nu mai trebuiasca la fiecare poza in parte sa schimbi un stiu ce....
    sa schimbam la template odată şi toate pozele să aibă ceva mai special...
    De exemplu ce m-ar interesa pe mine ar fi ceva de genul când cineva dă click pe o poză dintr-un post, să se mărească poza respectivă pe toată pagina şi să aibă de butoane cu next pictures ...

    Dar să fie pentru toate pozele... având în vedere ca am mai bine de 1000 de posturi... iti dai seama sa modific fiecare poza....asi îmbătrâni :))

    Aştept un răspuns la mult prea marele meu mesaj....poate ai tu ceva sursă de inspiraţie...că eu nu găsesc de fel...

    Ms fain şi sper că mă poţi ajuta :)

    RăspundețiȘtergere
  5. salut :D ai putea face un tutorial asemanator , doar ca asi vrea sa se schimbe imaginea .. sa am o imagine cu Home (nr.1) si cand pun click pe ea sa se schimbe imaginea nr.2 .

    RăspundețiȘtergere