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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw-RTr9SGR-hHFfTyxthaxvVFui15l9WfknUS0pJ8iX7f42PuaxhVFkd4Q2ZKVW-tb46fItoqrJOqw8fGRV5T7QF4RNb09gNfzgnb6sA46V5QS8ecCpD2z2ggOLzltZCnOC_XYnmsjHI/s1600/wild+horse.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw-RTr9SGR-hHFfTyxthaxvVFui15l9WfknUS0pJ8iX7f42PuaxhVFkd4Q2ZKVW-tb46fItoqrJOqw8fGRV5T7QF4RNb09gNfzgnb6sA46V5QS8ecCpD2z2ggOLzltZCnOC_XYnmsjHI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw-RTr9SGR-hHFfTyxthaxvVFui15l9WfknUS0pJ8iX7f42PuaxhVFkd4Q2ZKVW-tb46fItoqrJOqw8fGRV5T7QF4RNb09gNfzgnb6sA46V5QS8ecCpD2z2ggOLzltZCnOC_XYnmsjHI/s1600/wild+horse.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw-RTr9SGR-hHFfTyxthaxvVFui15l9WfknUS0pJ8iX7f42PuaxhVFkd4Q2ZKVW-tb46fItoqrJOqw8fGRV5T7QF4RNb09gNfzgnb6sA46V5QS8ecCpD2z2ggOLzltZCnOC_XYnmsjHI/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