Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

Besplatni blog predlošci za Blog.hr

Ovo su uputstva kako instalirati blog predložak. Predloške možete naći na mojoj web stranici: Besplatni predlošci za blog i web stranice


Najnoviji predložak

Good night

Predložak: Good night


Uputstva za instalaciju

Prije nego što išta pokušate, za svaki slučaj spremite svoj sadašnji HTML kod predloška u .txt file da ga možete lako vratiti ako nešto pođe po zlu!
Kliknite na thumbnail predloška da biste ga vidjeli u pravoj veličini. Po odabiru predloška:

  1. Kliknite na link download i skinite ZIP datoteku.
  2. Otvorite arhivu i otvorite u Notepadu datoteku naziva blog.hr.txt [SLIKA]
  3. Odaberite čitav kod sa Select All (Ctrl+A) [SLIKA]
  4. Kopirajte odabrani kod sa Copy (Ctrl+C) [SLIKA]
  5. Ulogirajte se u svoj blogeditor
  6. Klik na Dizajn [SLIKA] >> HTML kod predloška [SLIKA]
  7. Odaberite sav stari kod sa Select All (Ctrl+A) [SLIKA], pritisnite tipku Delete (Del) na vašoj tipkovnici i kliknite na Paste (Ctrl+V) za umetanje novog koda [SLIKA]
  8. Kliknite na Spremi [SLIKA]
  9. Da bi se promjene na vašem predlošku odmah prikazale, kliknite na Postavke >> Postovi >> Osvježi blog [SLIKA]

Ako vam ove upute nisu dovoljno jasne, pogledajte VIDEO TUTORIAL (Flash, 1MB) koji je napravila otrovna jabuka.

Predlošci neće utjecati na sadržaj vašeg bloga: vaši postovi, komentari i arhiva bit će netaknuti, ali koristite ih na vlastitu odgovornost.


Ima li još predložaka?

Evo linkova gdje možete naći još neke predloške prilagođene Blog.hr-u:


Predloške koje ćete sami morati kodirati da bi proradili na Blogu možete naći ovdje.

Predlošci po narudžbi


Predlošci po narudžbi

Izrada web stranica moj je posao - ako ste zainteresirani za narudžbu originalnog dizajna bloga ili web stranice, pogledajte moj web dizajn portfolio s primjerima prijašnjeg rada i javite mi se putem kontakt obrasca na stranici. Cijena ovisi o složenosti projekta pa pokušajte prilikom upita navesti što je više moguće detalja. Molim da koristite ovaj mail obrazac samo za tu svrhu. Ne šaljite poruke nevezane za posao ili zahtjeve za besplatnim dizajnom.

05.09.2007. @ 21:12

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Učestalo postavljana pitanja

Ovdje se nalaze odgovori na pitanja koja nisu toliko kompleksna da zaslužuju poseban post.


Ne rade mi username i password! Ne mogu otvoriti blog! Nestali su mi postovi! Netko mi je zauzeo adresu!

Ne mogu vam pomoći jer ovaj blog nije povezan sa uredništvom Blog.hr-a.


Kako se radi predložak?

Nemoguće je na to pitanje odgovoriti ukratko, a nadugačko imate po cijelom blogu. Preporučam tekstove:


Blog mi se presporo učitava!

Pretpostavljam da imate neku veliku slikovnu pozadinu? Također, možda imate i mnogo sličica na blogu? Objavljujete li više od 5 postova na stranici? Imate li neke JavaScript-e? MP3 vam svira u pozadini? Pokazujete ljudima neke filmiće?
Onda je sasvim normalno da vam se blog sporo učitava. Izbrišite neke od tih sadržaja i učitavanje će biti brže. Svakako testirajte svoju stranicu Web Page Analyzer skriptom, ona će vam reći je li učitavanje presporo i što trebate učiniti.
Za detaljnije upute pročitajte ovaj post.


Kako umjesto naslova bloga dodati sliku?

Samo pronađite red gdje piše

<h1><$ImeBloga$></h1>

i umjesto njega dodajte kod za sliku, kako je opisano u ovom postu.


Kako tekst Komentari zamijeniti nečim drugim?

Za to trebate otići u Dizajn > HTML kod predloška i pronaći tekst

<A HREF="<$KomentariPosta$>" TARGET="_blank">Komentari</A>

Logično, umjesto teksta "Komentari" upišite bilo što drugo. Isto vrijedi za sve što vidite u kodu (Isprintaj, Komentari On/Off...), pa neću ulaziti u detalje.


Kako da zabranim ljudima da kopiraju tekst ili slike?

Nikako. Ono sa zabranom desnog klika je glupo i uopće ne pomaže jer je svejedno moguće kopirati sve. Detaljno objašnjenje pročitajte ovdje.


Kako dodati još jedan stupac?

To ovisi o predlošku i ne postoji kratak odgovor. Jednostavno odaberite predložak koji ga već ima.

Nije moguće dodati ili izbrisati stupac, a da pritom ne morate promijeniti još mnogo drugih vrijednosti. Ispravan način dizajniranja predloška je da prije svega odredite koliko vam stupaca treba i napravite prazan "kostur" (možete takve gotove kodove kopirati odavde), a tek onda dolaze boje, fontovi, sličice i ostalo. Dodavati stupac na gotovi dizajn je kao da pokušavate obući donje rublje, a već imate na sebi majicu i hlače.

Najpreciznije što vam mogu savjetovati jest slijedeće:

  • Ako se radi o div layout-u sa dva stupca, treći <div> dodajte na kraj HTML-a (prije </body>) te ga ili apsolutno pozicionirajte na željeno mjesto, ili ga floatajte pored stupaca (sa float: left; ili float: right;).
  • Ako je riječ o tabličnom layout-u, trebate dodati još jednu ćeliju <td> tamo gdje želite da se pojavi - ako treba biti desno, dodajte je na kraj prije </tr>

Sad tek počinje prava zabava - morate prilagoditi širine svih elemenata tako da sretno koegzistiraju na normalnim rezolucijama. Šanse da vam se sve raspadne su velike, pa sačuvajte stari kod na računalu.


Kako izbrisati stupac?

Pomoću tipke Delete. Ne šalim se, samo trebate pronaći gdje se taj stupac nalazi u HTML-u, premjestiti boxeve u drugi stupac i izbrisati prazni <div> ili ćeliju. Nakon toga prilagodite širine preostalih stupaca ako želite da zauzmu njegovo mjesto.


Kako premjestiti stupac?

Kombinacijom odgovora na prijašnja dva pitanja.

  • Kod tabličnog layout-a trebate premjestiti željenu ćeliju na drugo mjesto, npr. s vrha tablice na dno ili obrnuto.
  • Ako je div layout u pitanju, dovoljno je malo pročačkati po CSS-u (promijeniti float: left; u float: right; ili obrnuto, ili promijeniti brojevne vrijednosti kod apsulutno pozicioniranih div-ova)

Ako napravim dizajn u DreamWeaver-u/FrontPage-u/... hoće li na blogu izgledati isto?

Možda. Možda samo u nekim browserima. Imajte na umu da vam trebaju ova dva koda da bi blog prikazivao postove, komentare i boxeve:
Kod za prikaz postova i komentara
kod za prikaz kalendara i boxeva
Ako koristite Internet Explorer, da biste dobili ispravan kod obavezno desni klik > View source.


Kako da izbrišem blog?

Ova bi opcija trebala biti dostupna u blogeditoru - Postavke > Korisnički račun


Kako linkati na moju e-mail adresu?

Piše ovdje.


Gdje moram kopirati ovaj kod koji si napisala? Ja ništa ne kužim!

Čitajte tekstove po redu. U prva dva su objašnjene osnove osnova. Ako to ne razumijete, ne mogu vam pomoći.


Kako promijeniti boju posta/naslova/boxa..?

Ovdje je to detaljno objašnjeno. Ako nešto ne piše, jednostavna procedura je:
1. pogledajte source stranice i nađite gdje je tekst koji želite promijeniti
2. promotrite između kojih tagova se nalazi (<h2>, <div class="post">...)
3. u CSS-u potražite tag/klasu koja se odnosi na taj tekst (h2, .post...)
4. promijenite vrijednosti između zagrada


Ne vide mi se hrvatska slova! (š, č, ć, ž, đ)

Nemate naznačen encoding, pa browseri ne znaju kako prikazati stranicu. Encodinga koji podržavaju hrvatske dijakritike ima više (ISO, UTF-8 i Windows) no samo Windows-1250 funkcionira na blog.hr. Odmah iza <head> upišite ovaj kod:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />

Koji je bolji format slika, GIF, JPG ili PNG?

Da je jedan najbolji, ne bi postojala sva tri. Svaki ima svoje vrline i nedostatke:
- GIF podržava samo 256 boja, ali su slike s manje boja prikazane čistije, bez zamućenja na rubovima. Osim toga GIF može biti transparentan (proziran) i animiran.
- JPEG/JPG podržava milijune boja i dobar je za fotografije, dok će na slikama sa manje boja biti očita zamućenja i točkice tzv. artefakti.
- PNG podržava milijune boja i transparenciju, kao i semi-transparenciju (poluprozirnost) koja nije još podržana u svim browserima. Najveći je memorijom jer je najmanja kompresija pa ga treba koristiti samo kada je to nužno, a u velikoj većini slučajeva nije.


Hoće li moji postovi ostati ako promijenim predložak? Hoće li se komentari izbrisati ako izbrišem kod za prikaz komentara?

Mijenjanjem predloška ne utječete na sadržaj bloga. Svi se postovi i komentari čuvaju u bazi podataka i što god vi učinili na predlošku, oni će ostati u bazi. Tek kad ih izbrišete iz blogeditora oni će potpuno nestati.


Promijenio/la sam predložak, a u arhivi je još stari! Ne vide mi se novi komentari na blogu, a postoje! Dodao/la sam post, a nema ga!

Ponekad treba proći malo vremena da se vide promjene. Osim bjesomučnog refreshanja (Ctrl+F5), nema druge pomoći.


Kako da dodam tražilicu na blog?

Otiđite na www.google.com/searchcode.html i postupak je dalje lijepo objašnjen, samo trebate kopirati gotov kod. Ako odaberete treći kod (sa pretraživanjem vašeg bloga) morat ćete zamijeniti YOUR DOMAIN NAME sa adresom vašeg bloga, oblika http://imebloga.blog.hr/


Kako da stavim guestbook na blog?

Na blog - nikako. Možete otvoriti besplatan guestbook na nekoj drugoj stranici, evo nekoliko njih:


Kako da stavim shoutbox na blog?

Nabavite kod s neke od ovih stranica:


Kako da stavim muziku/video na blog?

Znam jedino za Radio Blog Club i Divine Music. Za video imate YouTube.

Takve skripte nepotrebno usporavaju učitavanje bloga, a ljudima koji već slušaju glazbu na svom računalu samo će smetati.


Preselio sam se na novi blog, kako da automatski preusmjerim korisnike na novu stranicu?

Dat ću vam gotovi kod, a vi u njemu trebate promijeniti samo adresu do svojeg bloga (na dva mjesta).

<html>
<head>
<title><$ImeBloga$></title>
<script type="text/javascript">
="http://novaadresa.blog.hr/";
</script>
</head>
<body>
Ako vas skripta automatski ne preusmjeri na novu adresu, kliknite <a href="http://novaadresa.blog.hr/">ovdje</a>.
</body>

U kojim programima se izrađuje dizajn predložaka?

Izbor programa je u potpunosti vaš - ima ih mnogo, što komercijalnih, što besplatnih. Ja koristim Adobe Photoshop za izradu grafike, a kodiram u Programmers Notepad-u.

05.09.2007. @ 21:11

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Kako pokrenuti osobnu web stranicu?

Znam da sam rekla da više neću pisati ovdje :) ali ovo mi pitanje često ljudi postavljaju pa sam odlučila napisati kratki vodič na koji ću upućivati ljude.


Kako znati da vam treba osobna stranica?

  • na blogu vam je "tijesno" za sve sadržaje, pretrpan je
  • htjeli biste i blog, i galeriju slika, i stranicu s linkovima...
  • htjeli biste na jednom mjestu hostati sve slike i datoteke da vam uvijek budu pri ruci
  • shvatili ste da blog servisi imaju određena ograničenja

Ako ste otvorili više blogova da biste odijelili sadržaje, vrijeme vam je da otvorite vlastitu stranicu, makar na besplatnom hostingu. Ako koristite predložak koji pomoću JavaScripta otvara sadržaje u prozorčiću, zapravo vam se sviđa ideja obične web stranice i mogli bi razmisliti o tome.


Besplatni hosting

Ako ste početnik i želite vježbati, ili niste još sigurni koliko će vas to "držati", besplatna stranica je dobro rješenje. Sve što vam treba jest račun na nekom od besplatnih hostinga. Takvi obično imaju opciju uploada datoteka putem control panela, a neki dozvoljavaju i FTP upload. Preporučam da nađete hostera koji podržava FTP i naučite ga koristiti, jednostavno je i puno brže nego preko control panela.

Ako je adresa koju ste dobili uz besplatni hosting predugačka, možete je skratiti nekom od besplatnih domena. Neke imaju reklame, neke samo traže mali link negdje na stranici, ali su vrlo kratke i za početak sasvim dobre.


Plaćeni hosting

Ako već neko vrijeme imate web stranicu na besplatnom serveru i shvatili ste da vam se to sviđa, da su vaši apetiti prerasli skromnu ponudu besplatnih hostinga ili vam web stranica treba da promovirate svoj posao, plaćeni hosting vam više ne bi trebao biti preskup. Molim vas, ne radite (nažalost čestu) grešku i hostate web stranicu svoje tvrtke na besplatnom serveru. To rade amateri, a vi se sigurno ne želite takvima prikazati. Čak i tinejdžeri kupuju vlastite domene, pa možete i vi.

Koliko košta hosting?

Koliko košta automobil? Ovisi kakav, naravno. Za osobnu stranicu dovoljan vam je najmanji paket, a ti se kreću od 200-300 kuna godišnje naviše, ovisi kod kojeg hostera. Za popularnu web stranicu ili portal trebat će vam nešto veće, a to u hrvatskoj zna koštati i do nekoliko tisuća kuna godišnje, dok su cijene u Americi za iste karakteristike mnogo jeftinije.

Kojeg hosting providera odabrati?

Odluka je vaša, kao i odgovornost da se raspitate i nađete najboljeg. Postoje web stranice gdje se provideri ocjenjuju, kod nas je to Hosting recenzije, a jedan od stranih (ima ih tisuće, googlajte web hosting reviews) je Web Hosting Jury.

Gdje registrirati domenu?

Domena je često uključena u hosting paket, no ako ih imate više, preporučam da ih registrirate odvojeno od vašeg hosting providera. Zašto? Zato što tada, u slučaju da vam se vaš hosting provider više ne bude sviđao, možete svoje stranice bezbolno preseliti kod nekog drugog. Ako vaš hosting provider drži i vašu domenu, a vi mu kažete da želite otići od njega... događa se da pritom malo otežu i čitav prijelaz čine neugodnim. Ne kažem da to svi rade, ali zašto riskirati?
Postoje servisi koji su specijalizirani za registraciju domena. Kod nas je popularna REGica.NET (možete platiti općom uplatnicom, ne treba vam kreditna kartica), a najpopularniji strani registar je svakako GoDaddy. Koristila sam oba i nisam imala nikakvih problema. GoDaddy je dvostruko jeftiniji pa ako imate karticu ili PayPal to je bolji izbor.

Kako platiti hosting i domenu?

Ako imate kreditnu karticu ili debitnu karticu vezanu uz devizni račun (u banci su mi rekli da ona od kunskog ne radi, nisam pokušala) ne postoji nikakav problem. Najčešće su prihvaćene Visa i MasterCard.

Ako nemate kreditnu ni debitnu karticu, preostaju vam hrvatski hosteri i registri, oni prihvaćaju opće uplatnice i netbanking.

Koliko traje proces zakupa prostora i registracije domene?

To ovisi samo o načinu plaćanja. Ako plaćate kreditnom karticom, vaš web prostor može biti spreman unutar sat vremena, a domeni najčešće treba nekoliko sati da počne pravilno usmjeravati.

Ako kupujete domenu i prostor odvojeno, preporučam da najprije kupite domenu jer dok hostinga nikad neće ponestati, vašu idealnu domenu možda već sutra kupi netko drugi. Osim toga, Google i druge tražilice više vrednuju domene što su starije.


Preporuka: Odaberite savršeno ime i URL za web site

javascript: void(0);" onclick="this.target = ''; alert('Autor je zabranio komentiranje ovog posta.'); @ 21:10

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Savjeti za ljude koji rade predloške za blog

Vidim da je izrada blog predložaka postala novi hit, pa za sve one koji i sami to žele imam neke savjete. U vašem interesu je da ih pročitate. U nastavku su i odgovori na česta pitanja.


Savjeti

  • Budite sigurni da znate što radite. Ako vam se predlošci raspadaju u Firefoxu ili Operi, ako se na šarenoj pozadini tekst ne vidi... preporučam da naučite više prije nego nastavite ljudima davati predloške sumnjive kvalitete. Pokušajte ne ponavljati iste greške koje rade svi početnici.
  • Ne kradite kod i slike. DeviantART nije galerija besplatnih slika. Pišite svoj kod, a slike nabavljajte u galerijama besplatnih fotografija - neke od njih navedene su u ovom postu. Ako vam treba HTML kostur, možete ih slobodno preuzeti ovdje.
    Uzimanje tuđih crteža bez pitanja je krađa. Svatko zaslužuje poštovanje za ono što je napravio, pa tako i crtači, slikari i fotografi! Originalna slika zahtijeva više vremena i truda nego predložak. Ako ne vjerujete, provjerite sami.
  • Kada koristite tuđe slike i brusheve, napišite odakle ste ih uzeli. Vi tražite od drugih da ne miču sa predloška link do vašeg bloga i imate na to pravo - a imaju i vlasnici originalnih slika i brusheva.
  • Optimizirajte slike. Nemojte koristiti ogromne pozadine (wallpapere) - tako se web stranice ne rade. Dizajnirajte manje headere (do 300px visine), a ostavite više mjesta za tekst.
  • Hostajte kodove na nekom besplatnom serveru (blogspremnik podržava TXT datoteke, to vam je dovoljno), naručivanje kodova preko maila ne koristi ni vama ni korisnicima - osim ako ste baš paranoični pa morate znati tko je uzeo koji predložak.
  • To što radite predloške za blog, ne znači da ste nekakva zvijezda - budite kulturni prema drugim korisnicima i onima koji dizajniraju blogove malo lošije od vas, jer uvijek ima i onih koji su od vas puno bolji. Nemojte javno histerizirati ako netko od vas kopira kod, već dotičnoj osobi pošaljite e-mail i objasnite da radi nešto što se ne smije. Ako ustraje u tome, obavijestite administratora Bloga (sporo reagiraju, ali možda nešto učine).

Česta pitanja

Kako da prikažem sliku predloška na svoj blogu?

Otvorite testni blog na kojem je predložak i pritisnite tipku Print Screen (ili skraćeno Prt Scr) [SLIKA]. Otvorite Photoshop ili neki drugi editor slika i pritisnite Ctrl + V (Paste). Smanjite sliku i hostajte ju na nekom hostingu slika pa ubacite u post.

Kako da ljudima dam kod?

Najbolje je da kod spremite kao .txt datoteku i hostajte na nekom hostingu, npr blogspremnik. Korisnici Internet Explorera morati će kliknuti na View Source da bi došli do koda, a ostali će odmah dobiti kod.

Gdje da nađem slike i brusheve?

Popis galerija slika i Popis stranica sa brushevima, teksturama i uzorcima.

Gdje da nađem inspiraciju za predloške?

Pogledajte popis stranica koje nude besplatne predloške, a nepresušan izvor inspiracije je CSS Zen Garden. Samo pazite da inspiracija ne preraste u plagijat.


Preporučeni tekstovi:

01.08.2006. @ 21:44

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Informacije, razno

Tekstovi, slike i izvorni kod: nelchee


Nela Dunato art & Design
Moj design portfolio


In obscuro
Besplatni predlošci za web stranice


Cwtam - sketchblog
moj sketchblog




Prati me na Twitteru


Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a (Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D


Tutor.Blog


HTML i CSS tutoriali


HTML i CSS tutoriali

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google

Blog.hr koristi kolačiće za pružanje boljeg korisničkog iskustva. Postavke kolačića mogu se kontrolirati i konfigurirati u vašem web pregledniku. Više o kolačićima možete pročitati ovdje. Nastavkom pregleda web stranice Blog.hr slažete se s korištenjem kolačića. Za nastavak pregleda i korištenja web stranice Blog.hr kliknite na gumb "Slažem se".Slažem se