Možete stvoriti foto efekt u svojoj Tumblr temi koji prikazuje sliku jasno kad miš pređe preko slike, ali onda kada miš ne lebdi iznad slike, slika se čini zamućenom. Prvo pripremite slike koje ćete koristiti za efekt. Zatim u svoju temu Tumblr umetnite dva isječka koda. Imajte na umu da kod nije podržan u Tumblr postovima, samo u temama blogova.
Pripremite slike
Da biste izvršili zadatak zamućene slike, trebat će vam dvije gotovo identične slike: jedna kopija izvorne jasne slike i druga kopija iste slike, samo zamućene. Upotrijebite efekt zamućenja u GIMP-u ili Photoshopu da biste stvorili mutni izgled druge fotografije. Provjerite imaju li slike potpuno iste dimenzije.
JavaScript kod
Isječak JavaScript koda umetnut je između
i oznake vašeg bloga Tumblr. JavaScript kôd uključuje događaje MouseRollover i MouseOut. Događaj MouseRollover nalaže jasnu sliku za prikaz kad miš pređe preko slike. Događaj MouseOut definira koju će se sliku prikazati kada miš ne lebdi iznad slike.Isječak JavaScript koda koji se koristi za ovaj učinak je:
Promijenite referencu "Picture1.jpg" u URL za jasnu izvornu sliku. Promijenite referencu "Picture2.jpg" u URL zamućene slike.
HTML kod
HTML kôd koji prati Javascript isječak definira veličinu, mjesto i izgled slike. Umetnite HTML kôd u temu Tumblr tamo gdje želite da se prikazuje prikaz fotografija. HTML kôd koji prati gornji isječak Javascripta je:
Zamijenite "Picture2.jpg" URL-om zamućene fotografije koja će se prema zadanim postavkama prikazati. Promijenite varijable "širina" i "visina" u željenu veličinu prikazane slike.
Instalirajte kod
Da biste instalirali kôd u svoju temu Tumblr, otvorite svoju nadzornu ploču Tumblr, a zatim kliknite karticu "Prilagodi" na nadzornoj ploči da biste blog promijenili. Kliknite opciju "Uredi HTML" da biste otvorili uređivač tema. Odaberite isječak Javascript koda da biste označili kôd, a zatim pritisnite "Ctrl-C" da biste kopirali kôd. Kliknite prostor ispred ""U kodu teme, a zatim pritisnite" Ctrl-V "da biste zalijepili kôd.
Kopirajte HTML kôd, a zatim se vratite u uređivač tema Tumblr. U kodu pronađite mjesto na kojem želite da se foto efekt generira. Kliknite mjesto, a zatim pritisnite "Ctrl-V" da biste zalijepili HTML isječak. Kliknite "Ažuriraj pregled" da biste testirali učinak u prozoru Pregled. Kliknite "Spremi" da biste spremili promjene.
