Re: Blog tutorijali

by **Hitman** pet sij 30, 2009 8:15 am

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.

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: <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: <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");
} <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: 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: body {
background: url("putanja-do-slike.jpg");
background-repeat: no-repeat;
} 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: <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: <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): <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: <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.

by **Hitman** pet sij 30, 2009 8:15 am

Postavljanje glazbe na blog
Postavljanje audio sadržaja u pozadinu bloga.

Prije nego što počnem sa tutorijalom moram reći jednu jako važnu stvar: pazite što radite sa glazbom na blogu. Većina ljudi vjerovatno sluša glazbu na računalu u vrijeme surfanja na internetu tako da nije baš lijepo slušati dvije pjesme istovremeno. Ako već dodajete glazbu na blog stavite odmah na početku da je glazba isključena te da ju po mogućnosti posjetitelj može uključiti.
Traženje određene pjesme

Na stranici Divine-Music.net se nalazi veliki broj pjesama i uz svaku pjesmu je priložen kod koji možete kopirati na svoj blog. Da bi ste došli do željene pjesme izaberite u lijevoj navigaciji prvo slovo glazbenika. Klikom na neko slovo prikazat će Vam se pjesme i ispod svake pjesme ćete naći kod.
Upload pjesme

Imate neku pjesmu na hard disku koje nema na internetu? Onda Vam ostaje samo da ju uploadate na neki server. Za upload pjesme bih Vam preporučio slijedeća dva hostinga audio sadržaja: PutFile.com i Uploading.com Prvi zahtjeva registraciju dok na drugi možete odmah uploadati željenu pjesmu. Nakon uploada dobijete link do pjesme koji ubacite u HTML kod.
Postavljanje glazbe na blog

Kod koji ćete naći izgleda ovako: <p style="text-align: center;">
<embed src="link-do-pjesme" volume="50%" hidden="false" autostart="false" loop="true" height="70" width="40"></embed>
</p> U src upisujete link do pjesme, volume je glasnoća (volumen) pjesme u postotcima, height i width su veličine prozora u kojem svira glazba. autostart služi za trenutno pokretanje pjesme kod otvaranja web stranice, stoga bih Vam preporučio da tu vrijednost ostavite na false.

Još jednom Vam moram reći: ako stavite glazbu na svoj blog vjerovatno Vas više nitko neće niti posjetiti jer glazba na nekom blogu ili stranici strašno iritira pogotovo ako već nešto slušate.

by **Hitman** pet sij 30, 2009 8:16 am

Postavljanje video klipa na blog
Izbor postojećeg ili upload Vašeg video klipa te postavljanje na blog.

Isto kao što sam Vas upozorio kod postavljanja glazbe na blog morat ću Vas upozoriti i zbog postavljanja video klipova na blog. Nemojte ih stavljati osim ako je to baš potrebno jer su video fajlovi jako veliki, a neki ljudi još imaju modem tako da će im se blog sporo učitavati. A ni korisnici DSL-a neće biti presretni jer im promet jako brzo nestaje.
Upload video klipa

Po meni, najbolja web stranica za upload video klipova je YouTube.com. Stranica naravno zahtjeva registraciju u kojoj morate napisati svoju e-mail adresu, korisničko ime, lozinku, državu, spol i datum rođenja. Nakon registracije morate potvrditi ispravnost Vaše e-mail adrese i nakon toga možete uploadati svoj video klip klikom na Upload.
Izbor postojećih video klipova

Izbor video klipova na netu je stvarno veliki. Ponuda je velika: od smješnih video klipova, preko glazbenih do trailera igara. Preporučit ću Vam samo jednu web stranicu se ogromnom ponudom preko 20000 video klipova. Ta web stranica se zove VideoCodeZone.com. Pretraga video klipova je lagana. Možete ih tražiti prema glazbeniku, naslovu i playlisti. Nakon što ste upisali ono što Vas zanima ispod će Vam se prikazati ime glazbenika te broj video klipova. Klikom na glazbenika imate prikaz svih video klipova te njihovu ocjenu (1-5).
Postavljanje video klipa na blog

Nakon što ste izabrali željeni video klip prikazat će Vam se slijedeći kod kojeg možete ubaciti u Vaš blog: <p style="text-align: center;">
<embed name='Video player' src='putanja-do-video-klipa' autostart='false' type='application/x-mplayer2' width='300' height='300' showcontrols='1' showstatusbar='0' loop='True' enablecontextmenu='0' displaysize='0' pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/ MediaPlayer/'></embed>
</p>

Još jednom za kraj da kažem: Nemojte pretjerivati sa video klipovima na blogu.

by **Hitman** pet sij 30, 2009 8:17 am

Praćenje bloga putem RSS-a
RSS je skraćenica od Really Simple Syndication.

RSS je tehnologija koja Vam omogućava da pomoću RSS čitača pratite nove postove sa više blogova koji podržavaju RSS format, a da te blogove niste uopće ni posjetili.
RSS čitači

Moj izbor E-mail klijenta i RSS čitača je Mozilla Thunderbird. Prvo što morate napraviti je skiniti taj program i instalirati ako ga već nemate (skinuti ga možete ovdje). Sada slijedi namještanje programa, te postavljanje RSS kanala koje ćete pratiti.

1. Prvo idite na Tools -> Account Settings.

2. Kliknite na Add Account. Izaberite drugu opciju (RSS News & Blogs) te unesite bilo koji naziv.

3. Izaberite iz lijevog dijela ekrana naziv koji ste malo prije napisali (nalazi se iznad Local Folders).

4. Zatim kliknite na Manage subscriptions.

5. Otvorit će Vam se novi prozor. Da biste dodali RSS kanal sve što morate napraviti je kliknuti na Add i kopirati link do RSS kanala sa bloga kojeg želite pratiti. Putanja do RSS-a sa različitih blog servisa: http://imebloga.blog.hr/rss.xml
http://imebloga.mojblog.hr/rss.aspx
http://imebloga.bloger.hr/rss/

6. Sada kada svaki puta uđete u Mozillu Thunderbird, program će prvo pretražiti da li je bilo novih postova. Ukoliko je novih postova bilo, program će ih skinuti te ćete Vi sada moći bezbrižno čitati Vaše omiljene blogove.
Naši RSS kanali

croBLOGeri.com web stranica ima dva RSS kanala. Jedan je za praćenje novosti sa početne, a drugi je za praćenje novih blogova dodanih u naš blog direktorij. Čisto radi primjera kopirajte link od ta dva RSS kanala u Vaš RSS čitač.

by **Hitman** pet sij 30, 2009 8:18 am

Optimizacija bloga
Optimizacija za što brže učitavanje i korištenje bloga.

Kada posjetim neki blog, jedan od najvažnijih faktora moga ostajanja i čitanja postova na njemu je upravo brzina učitavanja bloga. Ako se blog učitava više od 10-15 sekundi mala je vjerojatnost da ću ostati na njemu neko duže vrijeme. No to nije slučaj samo kod mene nego i kod većine ostalih blogera. Stoga ću Vam u ovom tutorijalu objasniti koje stvari usporavaju blog te kako ubrzati učitavanje Vašeg bloga.
Slike

Istina, blog bi trebao i mora sadržavati slike (kod dizajna, postova...) ali sve u umjerenim količinama. Izbacite nepotrebne slike iz stupaca jer takve slike stvarno ne služe ničemu, one samo guše blog i on se učitava jako, jako dugo. Neka Vam u stupcima bude samo kratki opis bloga, par linkova i to je to. Slike koristite samo kod dizajna bloga i u postovima (maksimalno dvije slike po postu). I svakako, prije nego sliku postavite na blog optimizirajte ju da nije prevelika. Za optimizaciju slika Vam predlažem GIMP.
Glazba i video klipovi

Multimedija je najveći gutač bandwidtha i vremena koje je potrebno za učitavanje. Većina blogera ne voli glazbu i video klipove na blogovima. Zašto? Kao prvo jer troši puno bandwidtha i vremena za učitavanje, a kao drugo, možda im u pozadini već nešto svira, a kada dvije pjesme sviraju istodobno to baš i ne zvuči dobro. Ako već morate staviti neku pjesmu ili video klip, neka se ne pokreće automatski već pritiskom na dugme ukoliko korisnik to želi. Ako neznate kako to učiniti samo dodajte slijedeći kod između <embed> i </embed> taga: autostart="false"
Zaključak

Moja preporuka Vam je da svakako smanjite broj slika (pogotovo onih iz stupaca). Slike koje koristite za dizajn bloga i u postovima svakako optimizirajte, a ako baš morate staviti glazbu ili video klip neka se ne pokreću automatski već klikom na dugme. Nemojte dopustiti da se Vaš blog učitava dugo jer na taj način gubite posjetitelje i tako će jako malo njih pročitati Vašu pjesmu ili neki jako dobar tekst. Pridržavajte se ovoga, zbog sebe, ali i zbog drugih.

by **Hitman** pet sij 30, 2009 8:19 am

Dodavanje ikone (favicon) na blog
Favicon je kraći naziv od favorites icon iliti bookmark ikona.
Što je favicon?

Favicon je mala sličica koja se pojavljuje u adress baru, ispred adrese. Favicon se naziva još i bookmark ikona jer kada neku stranicu spremite u bookmark i ta ikona će se prikazati. Ikona je veličine 16x16 pixela sa maksimalno 256 boja. Ako još neznate o čemu se radi, pogledajte ovu sliku i sve će Vam biti jasno:

Crtanje ikone

Dodati favicon na blog nije nikakav problem, ali ju je najteže nacrtati. Ukoliko koristiti Adobe Photoshop skinite besplatni plugin sa Telegraphics. Ako Photoshop nemate skinite IconArt Freeware Version.

Da bi napravili ikonu u IconArt Freeware Version programu morate otići na File -> New Icon i zatim nacrtate željenu ikonicu. Evo kako je to izgledalo dok sam radio favicon za croBLOGeri.com web stranicu:

Upload ikone i postavljanje na blog

Ukoliko ste napraviti ikonicu za Vaš blog, sada je vrijeme da to i objavite na internetu. Vašu ikonu možete uploadati na BlogSpremnik.com. Nakon uploada ostaje Vam samo dodati kod na Vaš blog. Kopirajte slijedeći kod unutar <head> i </head> taga: <link rel='icon' href='putanja-do-ikone.ico' type='image/x-icon' />
<link rel='shortcut icon' href='putanja-do-ikone.ico' type='image/x-icon' />

Koristimo dva reda zbog internet pretraživača jer ih ima mnogo pa da ne bi došlo do greške. Nadam se da će Vam ovo koristiti i da ste saznali nešto novo.

by **Hitman** pet sij 30, 2009 8:20 am

Bojenje scrollbara
Tutorijal kako obojati scrollbar na svome blogu.

Želite da se scrollbar uklopi u ostatak Vašeg bloga? Ukoliko je odgovor na ovo pitanje da, nastavite čitati dalje. CSS-om određujete boje scrollbara, kako bi se što bolje uklopio u ostatak dizajna Vašeg bloga. Bojanje scrollbara nije standard u svijetu izrade web stranica, tako da će efekt biti vidljiv samo u Internet Exploreru 6. Nema tu puno mudrovanja, samo slijedeći kod ubacite u <head> tag unutar <style type="text/css">:

html, body{
scrollbar-arrow-color: #666666;
scrollbar-track-color: #f2f2f2;
scrollbar-face-color: #e5e5e5;
scrollbar-highlight-color: #d1d1d1;
scrollbar-shadow-color: #bfbfbf;
scrollbar-3dlight-color: #f2f2f2;
scrollbar-darkshadow-color: #808080;
}

Gornji primjer izgleda ovako:

Želite da se scrollbar uklopi u ostatak Vašeg bloga? Ukoliko je odgovor na ovo pitanje da, nastavite čitati dalje. CSS-om određujete boje scrollbara, kako bi se što bolje uklopio u ostatak dizajna Vašeg bloga. Bojanje scrollbara nije standard u svijetu izrade web stranica, tako da će efekt biti vidljiv samo u Internet Exploreru 6.

Da biste scrollbar uklopili u dizajn Vašeg bloga, samo promjenite vrijednosti boja. To možete učiniti sa bilo kojim grafičkim alatom kao što je GIMP. Još jednom da napomenem: scrollbar će promjeniti boju samo u Internet Exploreru 6, dok će u ostalim internet preglednicima ostati isti tj. defaultni.

by **Hitman** pet sij 30, 2009 8:21 am

Mijenjanje kursora (cursor)
Promjenite izgled kursora na svom blogu.

Dosta Vam je običnog kursora na Vašem blogu? Ako je, pročitajte ovaj tutorijal i saznajte kako promjeniti izgled kursora. Kopirajte slijedeći kod unutar <style type="text/css"> taga:

body{
cursor: default;
}

Ako želite da Vam se cursor promjeni samo kod linkova iskoristite ovaj kod:

a:hover{
cursor: default;
}

Sada Vam ostaje još samo zamjeniti riječ default s:
auto, crosshair, move, hand, help, text, wait, n-resize, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize.

Umjesto sistemskih kursora je moguće ubaciti i vlastiti, no to će raditi samo u Internet Exploreru 6, dok će ostali prikazati default kursor. Svoj kursor možete napraviti u programu Microangelo ili nekom drugom sličnom programu. Kada kursor napravite, uploadajte je u .cur ili .ani na neki besplatni hosting. Kod izgleda ovako:

a:hover{
cursor: url("http://www.putanja-do-kursora.cur");
}

by **Hitman** pet sij 30, 2009 8:22 am

JavaScript alert
JavaScript poruke (alert) na blogu.

Posjetili ste neki blog i vidjeli JavaScript poruku (alert) sa dobrodošlicom, a neznate kako to napraviti? Pročitajte ovaj tutorijal i saznat ćete. Ubacivanje koda je jako jednostavno, samo zamjenite slijedeći kod sa <body> tagom:

<body onload="javascript:alert('Pozdrav i dobrodošli na moj blog!');">

Ako želite da se pojavi više poruka za redom iskoristite ovaj kod:

<body onload="javascript:alert('Pozdrav i dobrodošli na moj blog!');alert('Osjećajte se kao kod kuće!');">

Za dodavanje novog reda unutar poruke koristite \n na slijedeći način:

<body onload="javascript:alert('Pozdrav i dobrodošli na moj blog!\nOsjećajte se kao kod kuće!');">

Ako želite ispisati poruku prilikom nečijeg odlaska sa bloga kopirajte slijedeći kod:

<body onunload="javascript:alert('Posjetite me opet.');">

Nadam se da ste sada naučili kako staviti JavaScript alert na blog. No moram Vas upozoriti: mnogi blogeri mrze te poruke (i ja sam među njima) te će odmah napustiti Vaš blog. Stoga dobro razmislite hoćete li te poruke staviti ili ne. Isplati li se izgubiti posjetitelje na ovaj način?

by **Sanela** ned vel 01, 2009 10:02 am

Ukoliko imate blog, a želite ga uljepšati ili osvježiti svojim izgledom, slobodno mi se možete javiti.
Moje radove možete vidjeti ovdje:

http://yashaskar.blog.hr

Hitman1, a gdje uploadati ikonicu za favicone?
Tražio sam, ali ne mogu naći. Sad

by **Hitman** ned vel 01, 2009 10:09 am

jel ovo šta pomaže?

Odeš na http://tools.dynamicdrive.com/favicon/
Izradiš ikonu iz slike, downloadaš i staviš je u root direktorij svog sajta (tamo gdje ti je i index file).
Uploadaj favicon.ico na server.
Da bi vidio rezultat, očisti cache browsera.

by **Sanela** ned vel 01, 2009 10:16 am

Mislim da je dovoljno skinuti već postojeću ikonu (a milijun ih je na ovoj stranici). Samo je trebao kod koji je moguće staviti u HTML dizajn i upload te ikone. To budem probao malo kasnije.

by **Neu** ned vel 01, 2009 10:21 am

^^fora su te ikone,ne znam jel ih ja mogu dodat na forum scratch

by **Sanela** ned vel 01, 2009 10:23 am

Neukrotiva je napisao/la:^^fora su te ikone,ne znam jel ih ja mogu dodat na forum

Naravno da možeš. Čak imaš i opcija za forume.
Imaš u .jpg i .ico obliku.

U .jpg imaš u raznim veličinama.
Pogledaj ti malo i skužit ćeš.

by Sponsored content