You are on page 1of 5

Pogledajte  moja  4  oblaka  ispod  HEADER‐a.  Naučit  ću  vas  kako  i  sami  možete  napraviti  tzv.

 
Horizontalni „živi“ menu ili ove iste upute jednostavno iskoristiti da naučite linkati slikice na željene 
URL adrese (bilo na svom blogu ili na neka druga mjesta). Od sada više ne morate za uploadanje slika 
na  sidebaru  koristiti  isključivo  „DODAJ  SLIKU“  gadget.  Ovo  je  puno  zanimljivije  vjerujte  mi,  i  pruža 
vam više mogućnosti oblikovanja.  

HTML KOD koji sam ja koristila za moja 4 oblaka ispod HEADER‐a izgleda ovako: (ovo je dio na kojeg 
ću se često pozivati u nastavku – „gornji kod“) 

<a href="URL stranice na koju se dolazi klikom na slikicu"><img style="width: 176px; height: 164px;" 
src="URL VAŠE SLIKICE" /></a> 

<a href=" URL stranice na koju se dolazi klikom na slikicu "><img style=" width: 176px; height: 
164px;" src=" URL VAŠE SLIKICE " /></a 

<a href=" URL stranice na koju se dolazi klikom na slikicu "><img style=" width: 176px; height: 
164px;" src=" URL VAŠE SLIKICE " /></a> 

<a href=" URL stranice na koju se dolazi klikom na slikicu "><img style=" width: 176px; height: 
164px;" src=" URL VAŠE SLIKICE " /></a> 

Možete primjetiti kako se radi o 4 identične linije kodova. CRVENO se odnosi na adresu gdje dolazimo 
klikom na slikicu, zeleno je širina i visina slikice a plavo je adresa slike koju ste prethodno uploadali na 
Imageshack (nema straha, pojasnit ću sve detaljno u nastavku). 

Za početak, idemo definirati ove stvari koje su obojane crvenom, zelenom i plavom bojom. Ne bojte 
se, znam da izgleda zastrašujuće, ali vrlo je jednostavno, samo pratite moje upute, vidjet ćete nije 
strašno! 

1. URL STRANICE NA KOJU SE DOLAZI KLIKOM NA SLIKICU 
Kada kliknete na naslov bilo kojeg posta, u browseru će se pojaviti njegova URL adresa. To izgleda 
ovako:  

 
Znači, tamo gdje sam u kodu napisala URL stranice na koju se dolazi klikom na slikicu ćete sistemom 
copy/paste zalijepiti tu adresu . Jasno je da se u gornjem primjeru radi o 4 oblaka (vi ćete iskoristiti 
neki drugi oblik ili slikicu) ali možete iskopirati još par redova i imati i više, odnosno ubiti koji red pa 
imati manje – kako vam više paše. 
 
 
 
 
 
 
 
2. ŠIRINA I VISINA (width: 176px; height: 164px;) 
Ovo je širina i visina slikice koju ćete uploadati (o tome odmah nakon što pojasnimo sve boje iz 
gornjeg HTML koda). Dakle, kada svoj kod zalijepite u prazan „DODAJ GADGET – HTML“ element na 
svojoj nadzornoj ploči, on vam automatski daje ovo: 
 
 

 
 
 
Ali,  vi  morate  kliknuti  na  opciju  UREDI  HTML  i  to  tako  da  kliknete  na  OBOGAĆENI  TEKST  i  to  će  se 
automatski pretvoriti u UREDI HTML – kada ste u ovom drugom mode‐u, vidjet ćete samo HTML kod 
a ne i slikice i tekstove, uvijek klikate na isto mjesto i ta dva mode‐a se izmjenjuju, probajte! 
 

 
Zašto vam to govorim? Zato što svoju širinu i visinu slikice koju ćete uploadati nećete moći vidjeti u 
mode‐u OBOGAĆENI TEKST već samo u mode‐u UREDI HTML. Tamo ćete vidjeti brojke width: 176px; 
height: 164px; koje onda možete mijenjati kako biste mogli povećati ili umanjiti slikicu. Ovo je u biti 
širina i visina moja 4 oblaka. 
 
 
 
3. URL VAŠE SLIKICE 
Ovo je možda najzanimljiviji dio. Dakle, kako ćete bilo koju slikicu koju napravite u Paintu ili 
Photoshopu umetnuti u gornji kod da ona glumi „button“, odnosno da se klikom na nju dođe do  
mjesta na blogu (posta) koji vi odaberete. Prvo, naravno morate napraviti slikicu. Nije važno koje je 
veličine, možete je smanjiti i povećati  kasnije (pojašnjeno u prethodnom koraku). 
 
Kad napravite slikicu ili gumbić ili što god poželite, spremite to negdje na svom računalu, Otiđite na 
slijedeću adresu: 
 
http://imageshack.us/ 
 
Kada stignete na ovu adresu, pred vama će se na zaslonu prikazati slijedeće: 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Pratite upute sa slike – uploadajte svoju slikicu! To traje nekoliko sekundi i onda ćete vidjeti ovo: 
 
 

 
 
 
Morate kopirate drugi kod (direct link) i to je upravo ono što je obojano plavom bojojm u gornjem 
kodu. Sada kada imate i crveno i plavo, znate kako podesiti zeleno – otiđite na svoju nadzornu ploču 
otvorite novi HTML ubacite gornji kod unutra, pestajte svoje vlastite crvene i plave kodove, podesite 
zelene kodove i spremite. Taj HTML možete sistemom „drag and drop“ (kliknuti mišem i držati miš 
dok ga vučete na željeno mjesto) odvesti iznad područja posta – vidi slikicu: 
 

 
 
 
 
Umjesto da radite horizontalni menu iznad područja posta, možete ueti samo 1 kod umjesto 4, 
napraviti sve što treba (crveno, zeleno i plavo) i postaviti takav HTML bilo gdje na sidebaru. Tako ja 
imam primjerice napravljen NB HOBBY&ART KREATIVNI PORTAL gumbić. 
 

DA PONOVIMO NA PRIMJERU TOG GUMBIĆA: 
 
Napravila sam fotku  u Photoshopu: 

 
koju sam onda uploadala na IMAGESHACK.US stranici. Tamo sam dobila DIRECT LINK koji sam 
umetnula u kod (plavo). Onda sam otišla na www.nbhobby.comr stranicu i skinula URL njihove 
početne stranice koji izgleda ovako http://www.nbhobby.com/ i njega umetnula isto u kod (crveno). 
To sam sve zalijepila u novi HTML GADGET na Nadzornoj ploči i tek tada prešla u mode UREDI HTML 
gdje sam podesila visinu i širinu slikice (zeleno). 
 
TADA! Gotovi smo!