Postavljanje slike na blog

by **Admin Marijo** pon vel 09, 2009 4:26 pm

Postavljanje slike na blog
Upload i postavljanje slike na blog te njeno uređivanje kroz HTML i CSS.
Upload slike

Da biste stavili određenu sliku na Vaš blog prvo ju morate uploadati na hosting slika (na nekom hostingu je potrebna registracija). Sam postupak uploada slike na server je iznimno lagan: izaberete željenu sliku sa svog hard diska te ju jednostavno uploadate klikom na dugme. Kada i ako je upload slike uspješno izvršen pokaže Vam se uploadana slika i još Vam samo ostaje da njenu putanju ubacite u HTML ili CSS kod vašeg bloga.

Kod:: Lista hostinga slika: * Slike.hr * ImageShack.us * Photobucket.com * TinyPic.com * IMGSpot.com * TheImageHosting.com

Postavljanje slike na blog

Nakon što ste sliku uploadali i saznali putanju do slike ostaje Vam samo još staviti sliku na blog, a to ćemo napraviti na ovaj način:

Kod:: <img src="http://www.putanja-do-slike.png" alt="Opis slike" />

Ovaj HTML kod ubacite unutar nekog teksta ili navigacije i slika će se pojaviti na Vašem blogu. Promjenite src za putanju do slike i alt za kratki opis slike. Ukoliko se slika ne pojavi na stranici pojavit će se opis slike. Ukoliko želite linkati sliku:

Kod:: <a href="http://www.link.com"><img src="http://www.putanja-do-slike.png" /><a/>

Ako želite sliku ubaciti sa CSS-om te možda preko nje nešto i napisati: .slika1 {
background: url("putanja-do-slike.jpg");
}

Kod:: <div class="slika1">Tekst preko slike</div>

Postavljanje slike na pozadinu bloga

Postoji dva načina za postavljanje slike na pozadinu bloga. Prvi je sa CSS-om, a drugi sa HTML-om:

Kod:: body { background: url("putanja-do-slike.jpg"); } <body background="putanja-do-slike.jpg">

Sa CSS-om uredimo body tag tako da dodamo background atribut unutar kojeg unesemo putanju do slike. Drugi način izvedemo sa HTML-om tako da unutar <body> taga isto dodamo background sa putanjom do slike. Ako želite da se vaša slika ponavlja horizontalno, vertikalno ili možda da se uopće ne ponavlja, iskoristite slijedeći kod:

Kod:: body { background: url("putanja-do-slike.jpg"); [code]background-repeat: no-repeat; }[/code]

Za ponavljanje slike dodajemo background-repeat atribut koji može biti no-repeat (nema ponavljanja), repeat-x (horizontalno) ili repeat-y (vertikalno). Ako želite da pozadinska slika stoji na mjestu dok scrollate blogom dodajte fixed unutar background atributa: body {
background: url("putanja-do-slike.jpg") fixed;
}
Uređivanje slike kroz HTML i CSS

Prvo što bih Vam preporučio da stavite je border: 0px; u CSS-u i to Vam savjetujem da uvijek imate: img {
border: 0px;
} Ako ipak želite dodati obrub oko slike koristite HTML kod:

Kod:: <img src="http://www.putanja-do-slike.png" border="1" />

Ako želite da bude mali razmak između slike i teksta tj. da se slika ne dodiruje sa tekstom dodajte ovaj kod u CSS fajl:

Kod:: <img src="http://www.putanja-do-slike.png" style="margin: 4px;" />

Pozicioniranje slike u odnosu na tekst se može vršiti na dva načina. Prvi način je s HTML-om (align može biti: left, right, top, bottom, middle):

Kod:: <img src="http://www.putanja-do-slike.png" align="left" /> S CSS-om se pozicioniranje vrši na ovaj način (float može biti left, right): <img src="http://www.putanja-do-slike.png" style="float: left;" />

Za centriranje slike se koristi slijedeći kod:

Kod:: <p style="text-align: center;"><img src="http://www.putanja-do-slike.png" /></p>

Nadam se da ste naučili kako postaviti sliku na Vaš blog te kako ju uredite po Vašoj mjeri dodavanjem obruba oko slike ili njenim pozicioniranjem u odnosu na tekst.