miercuri, 7 aprilie 2010

Efect de reflexie si perspectiva la pozele de pe Blogger

Pozele ocupa un loc important intr-un blog, ele intregind articolul si clarificand referirea blogerului la un anumit subiect.
Toate blogurile afiseaza imaginile la fel, in modul clasic. Dar daca vreti ca pozele voastre sa aiba un aspect mai deosebit, un efect care sa le puna in evidenta? Atunci ne folosim de scripturi externe pentru a face asta.
De curand v-am prezentat un script care poate da pozei un aspect de polaroid cu umbra, iar astazi va voi prezenta un script care da pozelor un efect de reflexie si de vedere in perspectiva.

Demo



Instalarea scriptului reflex.js - grad de dificultate usoara spre medie
Pentru ca efectul sa fie aplicat pozelor trebuie sa urmam 2 pasi:

Pasul 1. Intrati la Aspect --> Editati html si cu ajutorul combinatiei de taste Ctrl+F cautati acest cod:
</head>
Dupa ce l-ati gasit, copiati codul de mai jos inaintea lui:
<script src='http://efect-reflex.googlecode.com/files/reflex.js' type='text/javascript'/>
Dupa ce l-ati adaugat puteti salva sablonul pentru ca aceasta este singura interventie pe care o veti face in codul sablonului.

In acest moment pozele voastre nu s-au schimbat cu nimic, deoarece efectul se aplica fiecarei poze in parte, manual, prin adaugarea unui cod la codul html al pozei asupra careia vreti sa aplicati efectul de reflexie. Modalitatea prin care veti face asta este explicata la pasul 2.

Pasul 2. Pentru ca poza noastra sa capete efect de reflexie trebuie sa adaugam acest cod: class="reflex" in codul html al pozei noastre.
Deci, dupa ce ati adaugat o poza in postare intrati in modul Editati html al editorului de text, unde veti gasi codul html al pozei, care v-a arata cam asa:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_i6co2fwMbTo/S7xfV9_V0lI/AAAAAAAALgA/YuYVT5XFShE/s1600/wild+horse.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="http://3.bp.blogspot.com/_i6co2fwMbTo/S7xfV9_V0lI/AAAAAAAALgA/YuYVT5XFShE/s400/wild+horse.JPG" width="400" /></a></div>

Pentru ca poza sa capete efect de reflexie trebuie sa adaugam atributul:  class="reflex"  in felul urmator:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_i6co2fwMbTo/S7xfV9_V0lI/AAAAAAAALgA/YuYVT5XFShE/s1600/wild+horse.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="http://3.bp.blogspot.com/_i6co2fwMbTo/S7xfV9_V0lI/AAAAAAAALgA/YuYVT5XFShE/s400/wild+horse.JPG" width="400" class="reflex"/></a></div>

Acum reveniti la modul normal de scriere si va puteti continua lucru. Publicati postarea si vizualizati blogul. Daca ati introdus corect atributul atunci poza voastra v-a avea un aspect de reflexie cu perspectiva.

Credit cod: JavaScript reflex.js
Imagine: www.mountainmancountry.com

11 comentarii:

  1. Super tare din nou!Esti tare Daniel.Dar sti ca eu vin mereu si cu intrebari:P.Intrebarea este: Cum as putea sa adaug un formular cu register pe blog cu login si cu profiluri pestru toti cei inregistrati,cu username si parola desigur?

    RăspundețiȘtergere
  2. Mie nu imi merge. Am urmat intocmai pasii, dar singurul rezultat e ca mi se incarca mult mai greu pagina. In rest nimic. :(

    RăspundețiȘtergere
  3. In primul rand lasati aici adresa blogului unde ati pus codurile. Nu imi face placere sa caut in 6 bloguri si chiar si atunci sa nu gasesc codurile in sursa.
    In al doilea rand lasati codul pe blog pana verific, altfel nu am cum sa-mi dau seama care e problema.

    La comentarii de acest gen nu voi mai raspunde. Acum eu ce trebuie sa fac, sa va intreb pe ce blog ati pus codurile, nu?

    RăspundețiȘtergere
  4. E super tare... Mie imi merge pe toate 3 blogurile...

    RăspundețiȘtergere
  5. Intradevar, arata bine, am incercat si eu aceasta si merge. Nota 10 pentru articol.

    RăspundețiȘtergere
  6. Foarte fain... si simplu de realizat. Ma bucur ca exista acest blog:-*

    RăspundețiȘtergere
  7. utile informatiile.multumesc mult

    RăspundețiȘtergere
  8. daniele esti suuuper! sarumana de toate postarile astea!
    mi-am facut si eu efectul asta,e super!http://gabyd2.blogspot.com/

    RăspundețiȘtergere