vineri, 19 martie 2010

Poze pe Blogger cu efect polaroid si umbra (instant.js)

Daca aveti un blog foto si vreti ca pozele pe care le postati pe blog sa aiba un aspect mai deosebit atunci acest script este unul care face ca imaginile voastre sa aiba un aspect de poza polaroid cu umbra si o mica curbare, dandu-le un aspect 3D.

Vezi poza de mai jos.




Pentru a instala acest script trebuie sa mergeti la Aspect --> Editati html, sa faceti o copie a sablonului actual pentru eventualitatea in care lucrurile merg prost si sa cautati cu ajutorul combinatiei de taste Ctrl+F, tagul:

</head>

Dupa ce l-ati gasit, copiati codul de mai jos inaintea lui:

<script src='http://efect-polaroid.googlecode.com/files/instant.js' type='text/javascript'/>


Salvati sablonul.

Daca vizualizati sablonul veti observa ca pozele voastre nu au nimic schimat. Asta deoarece efectul se aplica manual, pe fiecare poza in parte prin adaugarea atributului:  class="instant"

Deci pentru ca pozele voastre sa capete aspect de polaroid trebuie sa umblati la codul html a postarii si mai exact la codul html al pozei pe care ati adaugato in postare.
Intrati in modul Editati html al editorului de text si cautati codul html al pozei. El v-a arata in genul acestuia:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_i6co2fwMbTo/S6K2dNU85tI/AAAAAAAALeg/4Dhf4mYW9HQ/s1600/example.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="http://1.bp.blogspot.com/_i6co2fwMbTo/S6K2dNU85tI/AAAAAAAALeg/4Dhf4mYW9HQ/s400/example.jpg" width="400" /></a></div>

Pentru ca imaginea sa aiba aspect de polaroid trebuie sa adaugam atributul:  class="instant" in felul urmator:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_i6co2fwMbTo/S6K2dNU85tI/AAAAAAAALeg/4Dhf4mYW9HQ/s1600/example.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="http://1.bp.blogspot.com/_i6co2fwMbTo/S6K2dNU85tI/AAAAAAAALeg/4Dhf4mYW9HQ/s400/example.jpg" width="400" class="instant"/></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 pozele voastre vor avea un aspect de polaroid cu umbra.

Credit cod JavaScript instant.js
Imagine: http://www.flickr.com/photos/tryingyouth

9 comentarii:

  1. te-am adăugat :)

    trecemă Informaţii diverse

    RăspundețiȘtergere
  2. Scuzati ca trimit aici comentariu dar am nevoie de ajutOR si nu stiam unde...as vrea sa stiu cum pot sa fac sa se dea pagina in colt sus si sa apara o imagine de sa dau click ca si aici http://www.cpstylez.com/?

    RăspundețiȘtergere
  3. Un Prost, poti sa detaliezi putin ?!

    RăspundețiȘtergere
  4. Deci...observi ca in colt dreapta sus zice "here" si daca pui cursorul se desghide putin ca si cum ai da pagina la o carte si apare ca si o imagine tip buton.El zice ca e un plugin dar nu stiu de unde sa-l iau sau cum sa-l pun.Ma poti ajuta?

    RăspundețiȘtergere
  5. Ma intereseaza daca este vreo posibilitate de a scrie de exemplu numele blogului pe fotografiile publicate pe blog, fara a folosii editare in programe speciale

    RăspundețiȘtergere
    Răspunsuri
    1. E posibil sa existe vreun script, dar eu personal nu stiu nici unul.
      Pe Wordpress stiu ca era un plugin dar pentru blogger nu cred sa fi scris cineva vreun script.

      Ștergere