Besplatan blog u 6 koraka

Kako napraviti besplatan blog [6 jednostavnih koraka za pocetnike]

Pocetak blogovanja je NAJBOLJI besplatan poklon koji sebi mozete da priustite na bilo koji dan u godini.

Blog ne samo da vam dozvoljava da delite svoja misljenja, iskustva, svoje znanje, da sticete obozavatelje i pratioce, vec i da ostvarite pristojan prihod preko vaseg bloga.

Ako ste novi u blogovanju i pitate se kako zapoceti i napraviti blog besplatno, u ovom clanku cu vam pokazati kako da napravite besplatan blog na blogger-u, besplatnoj google-ovoj platformi.

Pa da pocnemo sa nekim osnovnim uvodom na Blogger.com.

Uvod u Blogger.com

Blogger.com je Google-ova besplatna stranica za blogovanje ili platforma na kojoj mozete kreirati besplatni blog sa poddomenom blogspot.com (na primer, mojprviblog.blogspot.com) ili mozete kupiti domen (preporucljivo) kako bi ste imali savrsen sajt (na primer, www.mojprviblog.com), ali se na samom pocetku drzite poddomena dok se malo ne uhodate i ne upoznate osnove blogovanja na ovoj platformi.

Prednosti pokretanja bloga na Blogger.com

1. Pokretanje bloga na Blogger.com je besplatna i jednostavna za pokretanje.
2. Platforma je u vlasnistvu Google-a, tako da imate poverenje i kredibilitet.
3. Iako postoji puno besplatnih platformi za blogovanje kao sto su Wordpress, Weebly, Tumblr, Blogger.com je medju njima pobednik kada je rec o slobodi i ponudjenim funkcijama.
4. Mozete da monetizujete svoj blog sa Google Adsense i drugim programima poput affiliate marketinga lako za razliku od drugih platformi.

Sada kada smo se malo upoznali sa nekim osnovnim stavkama za blogovanje, mozemo preci na objasnjenja i startovanje bloga, korak po korak.

Korak po korak vodic za pokretanje besplatnog bloga na Blogger.com

Sada kada znate zasto je pokretanje bloga na bloggeru korisno, idemo na sledeci koran.

Pocetak na Blogger.com

Navescemo svih 6 koraka koje cemo detaljno preci u nastavku:

1. Kreiranje Blogger naloga
2. Izbor imena bloga i teme
3. Optimizacija Blogger Bloga
4. Uredjivanje teme i rasporeda
5. Objavljivanje vaseg prvog sadrzaja
6. Monetizovanje Bloga sa Adsense

KORAK 1:

Kreiranje Blogger naloga

Da biste zapoceli, idite na Blogger.com koja ce vas automatski prebaciti i pozdraviti sa lepom odradisnom stranicom koja vas poziva da kreirate  besplatan blog.

Blogger.com pocetna stranica 

Posto je Blogger.com Google-ov proizvod, mozete jednostavno kreirati besplatni blog nalog prijavom na vas Gmail nalog.

Kada se prijavite, od vas ce biti zatrazeno da koristite blogger kao podrazumevani Google plus profil ili zelite da nastavite sa ogranicenim profilom blogger.com.

Preporucujem da odaberete za dodatne pogodnosti kao sto je povezivanje vaseg bloga sa drustvenim Google Plus profilom.

Na sledecem ekranu kliknite dugme "Kreiraj svoj blog" da biste pokrenuli svoj prvi blog.

KORAK 2:

Izbor imena bloga i teme

Na sledecem ekranu, mozete izabrati domen za svoj blog.

Ime domena, u slucaju da ne znate, predstavlja adresu preko koje ljudi sirom sveta mogu pristupiti vasoj veb lokaciji (veb sajtu).

Izaberite kratko ime domena koje je relevantno za vasu temu na blogu. Na primer, ako biste u blogu pisali o zdravoj ishrani, receptima, dijeti, vas domen bi, na primer bio, dijetaizdravahrana.blogspot.com, mozete staviti kako god vi zelite, ali gledajte da se domen podudara sa onim sto se nalaziti na vasem blogu.

Zatim, odaberite odgovarajucu temu (odlucite kako ce vas blog izgledati na prednjoj strani) za vas blog i kliknite na dugme "Kreiraj blog!" (Vi naravno, uvek mozete promeniti temu ukoliko vam se ne svidja.)

KORAK 3:

Optimizacija Blogger Bloga

Nakon sto ste napravili vas blog, vreme je da ga optimizujete za vidljivost na pretrazivacima i bolje korisnicko iskustvo.

Ovo je jednokratni proces.

Mozete pristupiti na levoj bocnoj strani.

Samo kliknite na opciju sa leve strane koja glasi "Settings", i mozete optimizovati blog kao sto je to prikazano ispod:

1. Dodavanje opisa na vas blog

Dodavanjem opisa na vas blog pomazete vasim citaocima i pretrazivacima da znaju o cemu se radi na vasem blogu. Mozete ga podesiti tako sto cete izabrati opciju osnovnih postavki  u glavnom panelu. Vidi na slici:

2. Optimizacija vaseg posta na blogu

Ovo podesavanje ce optimizovati vasu pocetnu stranicu i kako sadrzaj izgleda u postavkama, koliko postova zelite da prikazete na vasoj pocetnoj stranici, komentarisanje postova, itd, ...

Ova podesavanja su prilicno laka i jasna, ali ako imate nekih poteskoca, mozete jednostavno da kliknete na simbol "?" i dobicete vise detalja o tome.

3. SEO Optimizacija Bloga

U ovom odeljku optimizujte vas blog za pretrazivace.

• Meta tags - Ovde cete opisati o cemu se radi na vasem blogu. Ovaj tekst ce se pojaviti na pretrazivacima i njime privlaciti citaoce na vas blog.
• Custom Page Not Found - Kada posetioci pristupe adresi stranice koja vise ne postoji, preko ove opcije im mozete ostaviti poruku da ta stranica vise ne postoji ili ih preusmeriti ka nekoj drugoj ili novoj adresi/stranici (Opcija Custom Redirects).
• Sledeci korak "Crawlers and indexing" - savetujem vam da detaljno o tome procitate ovde kako ne bi bilo problema.

KORAK 4.

Uredjivanje teme i rasporeda/izgleda

U ovom koraku uredicemo izgled naseg templejta, sablona ili teme bloga.

Blogger nudi niz besplatnih sablona za vas blog koji su osnovni i jednostavni. Ali, ako zelite da pokrenete dugaciji sablon/izgled za vas blog, mozete ih preuzeti besplatno, imate beskonacno besplatnih sablona koje mozete naci. Ovde mozete procitati nesto vise o tome.

Za sada cemo koristiti podrazumevani sablon.

1. Dodavanje Logo-a

Logo je ono sto definise vas i identifikuje vas brend.

Blogger vam takodje omogucava da postavite prilagodjeni logo za vas blog.

U pocetku blogovanja ne morate nesto preterano da se opterecujete oko logoa. Mozete jednostavno kreirati jednostavni logo pomocu besplatnog alata kao sto je Canva.

Posle kreiranja, mozete da predjete na opciju i izaberete link "Edit" u zaglavlju.

2. Brisanje Navbar-a

Navbar je neugodna traka za navigaciju na vrhu svake stranice na kojoj tipka da se odjavite ili da posetite druge blogove.

Preporucujem da ovu traku uklonite jer izgleda veoma ruzno i omogucava da vasa poseta ode na druge blogove preko opcije koja se nalazi na njoj.

Da bi ste je uklonili, kliknite na opciju "Edit" u pravougaoniku (vidi sliku iznad) i u sledecem iskacucem prozoru je uklonite.

3. Dodavanje prilagodjenog Gadgeta

Gadgeti su mali unapred napravljeni uredjaji koji vam pomazu da dodate razlicite funkcionalnosti na vas blog.

Mozete ih koristiti za dodavanje razlicitih dugmica drustvenih medija, opciju pretrazivanja, kontakt formu, statistiku poseta, prilagodjeni meni ili bukvalno bilo sta preko prilagodjenog HTML-a.

Ako zelite da dodate prilagodjeni gadget, kada odaberete sa leve strane opciju "Layout", videcete male okvire u kojima pise "Add a Gadget". Klikom na Add a Gadget otvorice vam se nov iskacuci prozor u kome imate puno opcija i gadgeta, izaberite sta zelite.

Ovim ste zavrsili veliki posao posao ka profesionalnom blogovanju na bloggeru. Sve sto sledece trebate da uradite jeste da se bacite na kvalitetno pisanje i objavljivanje kvalitetnih clanaka koje ce vam omoguciti veliku posetu i zainteresovanost ka vasem blogu. 

KORAK 5:

Objavljivanje vaseg prvog sadrzaja

U slucaju da ste zbunjeni, postovi i stranice su doslovno ista stvar, osim cinjenice da se stranice obicno konstantni podaci koji se retko menjaju ili azuriraju ( Na primer, politika privatnosti, kontakt informacije, opis i sadrzaj bloga, biografija, i sve druge takve informacije koje su konstantne i koje se retko kad menjaju.)

Na bloggeru mozete kreirati neogranicen broj clanaka (postova) i samo 20 stranica, tako da vam savetujem da ih mudro i pametno iskoristite.

1. Kreiranje stranice "O nama" za vas blog

Ova stranica je verovatno i najposecenija na blogu, jer svaki citalac koji zeli doci da proveri ko ste, sta je vasa misija i sta oni mogu ocekivati od vas na vasem blogu.

Na ovoj stranici jednostavno trebate da predstavite sebe.

Nakon toga, mozete napisati nesto o vasem blogu i koje sve teme mogu ocekivati.

Ako zelite da pruzate usluge, ako ste otvoreni za poslovanje i saradnju, takodje mozete otvoriti posebnu stranu o tome.

Na kraju, nemojte zaboraviti da dodate vase drustvene kanale poput facebook stranice, profila, twittera ili bilo koju drugu drustvenu mrezu koju koristite.

2. Pisanje politike privatnosti

Politika privatnosti i uslovi koriscenja daju zakonska pojasnjenja u vezi sa nacinima na kojima vasa veb lokacija koristi podatke o posetiocima, za koje faktore ste odgovorini za njih, a za sta ne.

Ovo su veoma korisne i bitne stranice koje trebate da kreirate pre nego sto javno pokrenete vas blog ili podnesete zahtev za bilo kakve programe monetizacije kao sto je na primer Adsense.

Ove stranice se lako kreiraju ili generiraju, ne treba vam neko veliko znanje, tako da vas to ne treba plasiti. Imate bezbroj primera na internetu kako to sve treba da izgleda, uostalom, pisacu i ja nesto vise o tome u nekom sledecem postu.

3. Pisanje vaseg prvog posta

Sada je vreme da napisete i prve postove/clanke koje zelite da ljudi citaju na vasem blogu.

To su obicno teme oko kojih imate iskustva ili strucnog znanja, ili odredjene kljucne reci za koje zelite  rangirati  kada ih ljudi pretrazuju na Google-u.

Da biste napisali post, idite na kontrolnu tablu vaseg bloga i izaberite opciju "New Post".

Na slici iznad, otvara vam se prazna povrsina na kojoj cete pisati, paleta alata sa kojima mozete da uredite vase clanke, kao i prostor u kome cete upisati naslov vaseg posta.

Koncept uredjivanja je slican onome u Wordu ili Google doc-u, tako da nista nece biti neobicno ili tesko.

Moja preporuka je da napisete barem 5 kvalitetnih postova pre nego sto ih javno objavite ili ga podelite sa prijateljima preko drustvenih mreza.

Kako se broj postova povecava na vasem blogu i vasa poseta ce rasti i dati mnogo vise informacija posetiocima kakav je vas blog.

KORAK 6:

Monetizovanje vaseg bloga pomocu Google Adsense-a

Ovaj vodic za pokretanje besplatnog bloga sigurno bi bio nepotpun bez tutorijala za monetizaciju vaseg bloga. 

Ovde mozete procitati nesto vise o Adsense-u.

Kada budete imali neki pristojan broj postova na blogu i solidnu posetu, definitivno se registrujte za Google Adsense kako biste zaradili od vaseg bloga.

Prijava je vrlo laka, imat opciju u levom meniju pod nazivom "Zarada", popunite sve sto treba i sacekajte da vam Google odobri.

Posto sam napravio demo blog u svrhu ovog tutorijala i naravno nije odobren Adsense. :D

Medjutim, kada imate sve sto je potrebno na blogu, nekoliko stranica i postova, mozete uspesno da dobijete odobrenje!

I za kraj, nadam se da vam je ovaj vodic barem malo pomogao da napravite vas blog, steknete neko iskustvo o blogovanju, a mozda i zaradite novac.

Continue Reading →

Prilagodjene oznake zaglavlja robota - Podesavanja za Blogger

Da li ste znali da roboti za pretragu? Oni su odgovorni za prepoznavanje azuriranja na nasim stranicama i obavestavaju pretrazivace o tome.


Uz pomoc odgovarajucih definisanih oznaka, mozete komunicirati sa popisivacima (robotima) da se poveca ili smanji vidljivost za pretragu.

Kako da podesite Prilagodjene Oznake Zaglavlja Robota?

Nadam se da ste korisnik Blogger platforme kojeg raduje veca izlozenost u pretrazivacu, tako da ce vas organski saobracaj dostici vrunac.

Ako je tako, onda preporucujem da ispratite ovaj vodic do kraja i omogucite prilagodjene oznake zaglavlja robota za maksimalnu vidljivost u pretrazivacima (posebno za nove blogove).

Pre nego sto krenemo sa procesom upoznavanja prilagodjenih oznaka zaglavlja robota, trebalo bi da znate njihovo znacenje.

 Prilagodjene oznake zaglavlja robota i njihovo znacenje

1. all - Ako stiklirate ovu oznaku, popisivaci nisu vezani nikakvim ogranicenjima. Oni slobodno mogu da pregledaju, popisu, indeksiraju i izloze sadrzaj.

2. noindex - Nisu svi blogovi za javno deljenje. Cak i ako ne delite URL vaseg licnog bloga sa bilo kim, velike su sanse da ce ljudi doci do njega iz rezultata pretrage. Za takve stvari, koristi se bas noindex jer sprecava pretrazivace da indeksiraju stranice.

3. nofollow - Nofollov i dofollow su za izlazne linkove. Dofollow je standardna oznaka robota za vase izlazne linkove. To znaci da pretrazivaci mogu da procesljaju stranice koje su linkovane. Ako ne zelite da roboti pregledaju te veze, dodaje se nofollow oznaka.

4. none - none je kombinacija noindex i nofollow oznaka. 

5. noarchive - Google kesira odredjene web stranice i pokazuje vezu sa kesirani stranama u rezultetima pretrage. Google pravi kopiju vaseg sajta na njihovom serveru da se prikaze u slucaju da padne. Ako stiklirate ovu oznaku to bi znacilo da iskljucujete sacuvanu verziju u stranicama za pretrazivanje.

6. nosnippet - Tekst fragmenti u rezultatima pretrage da pomognu ljudima oko toga sta je na stranici. Ako zelite da zadrzite sadrzaj ekskluzivnim, stiklirajte oznaku.

7. noodp - Open Directory Project ili Dmoz je  visejezicni direktorijum sajtova i veb stranica. Google, ponekad, koristi informacije iz njega. Mozete ga iskljuciti ako to zelite.

8. notranslate - Da li zelite da iskljucite prevod na vasem sajtu? Stiklirajte ako zelite da ukljucite prevodjenje.

9. noimageindex - Ako dozvolite Google-u indeksiranje vasih slika, ljudi mogu da ih ukredu i postave na svojim sajtovima. Da biste to sprecili, mozete koristiti ovu oznaku.

10. unavailable_after - Ova oznaka znaci da internet stranica nece biti prikazana u rezultetima pretrage posle navedenog datuma i vremena. 

Kako podesiti prilagodjene oznake zaglavlja robota?

Kao sto smo znate, govorimo o podesavanju oznaka zaglavlja robota na Bloggeru. Pratite sledece korake u nastavku:

• Posetite Blogger.com i prijavite se na vas nalog. Sa liste blogova izaberite onaj koji zelite.
• Zatim, idite na Podesavanja > Podesavanja pretrage. Tu mozete videti opciju za Podesavanje oznake zaglavlja robota, kliknite na Izmeni

• U ovom koraku, kada kliknete na opciju Izmeni, pojavice vam se opcija da li zelite da omogucite ili ne. Idete na opciju Da.

• Sada ce vam se otvoriti jedan okvir sa oznakama koje cete stiklirati. 

• Ispratite sve kao sto je na slici iznad i sacuvajte promene.

To bi bilo to. :)

Continue Reading →

Sitemap za "Staticke stranice" - Blogger

Sitemap za "Staticke stranice" - Blogger

Blogger blogovi imaju sitemap.xml fajl koji sadrzi listu linkova svih "postova" objavljenih od strane korisnika. Ali ono sto je nedostajalo je lista "statickih stranica" koje ova sitemap fajl ne ukljucuje. Ove stranice se ne pojavljuju na sitemap generisano na atom.xml ili rss.xml i ne postoji nacin da se objavi fajl na blogger. Blogger sada automatski generise poseban dinamican sitemap za blog stranice koja sadrzi spisak svih statickih stranica koje su do sada objavljene. Sitemap za blogspot statickih stranica se nalazi na /sitemap-pages.xml. Sada mozete lako da dodate vase stranice na pretrazivacima i da se pravilno popisu i indeksiraju.

Gde se nalazi vas Sitemap Staticnih stranica?

Mozete pristupiti vasoj sitemap stranici tako sto cete ukucati sledecu URL adresu u adresno polje vaseg browser-a.

Za standardne domene .blogspot :

http://Vas-Domen.blogspot.com/sitemap-pages.xml

Za vas vlastiti domen:

http://Vas-Domen.com/sitemap-pages.xml

Tamo gde pise "Vas-Domen" upisite naziv vaseg domena.

Na primer, u mom slucaju, sitemap se nalazi na:

http://www.bloggerisanje.blogspot.com/sitemap-pages.xml

Slanje Sitemap za staticke stranice

Posaljite vase staticke stranice na google tako da bi roboti mogli da indeksiraju i prikazu u Search Engine Result Page - SERP (stranica pretrazivaca sa rezultatima pretrazivanja).

Pratite sledece korake:

• Idite na Google Webmasteri (Google webmaster tools)
• Izaberite vas blog sa liste
• Idite na opciju Popisivanje (Crawl) > Sitemaps

• Kliknite na Dodavanje/Testiranje Sitemapa

• Ubacite sledece u rubriku sitemap-pages.xml
• Kliknite na Posalji i to je to.

Isti metod se primenjuje i za ostale pretrazivace poput Bing/Yahoo ili Yandex.

Zasto nisu sve staticne stranice indeksirane od strane Google-a?

Google moze da indeksira samo stranice koje nisu oznacene sa "noindex", meta tagova ili Custom Robots Tagova. Ako ste izabrali opciju iz "noindex" iz podesavanja stranica, a objavljujete stranicu koristeci Blogger editor onda ce ta stranica biti dostavljena na Google od strane sitemape, ali to nece biti indeksirano sve dok ne iskljucite opciju "noindex".

Na primer, u ovom slucaju imamo 6 stranica, ali su samo 3 indeksirane. To je zato sto smo postavili 3 stranice kao "noindex". Ove stranice obuhvataju Affilate strane, Disclaimer pages itd...

Continue Reading →

Kako dodati PDF na blog

Dodavanje PDF i druge dokumente na vas blog

U ovom postu cu vam objasniti kako da ugradite ili dodate (Embed) bilo koji PDF ili neki drugi dokument na vasu stranicu. Postoji mnogo nacina kako se mogu dodati, ugraditi neki PDF dokumenti ili neki drugi kao sto su Microsoft Word, PowerPoint prezentacije, tabele, Excel tabele na nekoj vasoj stranici, u ovom slucaju je to Blogger platforma.

Najlaksi nacin i najpouzdaniji u ovom slucaju je Google Docs ili Google dokumenti. Zbog toga cu u ovom clanku objasniti kako da dodate PDF ili bilo koje druge dokumente na vas blog.

Prvi korak, idite na https://drive.google.com i prijavite sa na vas gmail nalog da biste mogli uci na vas Google Disk. Nakon prijave na vas Google nalog, mozete koristiti Google Disk.

Sledeca stvar je da postavite/uploadujete PDF fajl iz vaseg kompjutera na Google Disk. Desnim klikom na opciju "Moj disk" pojavice vam se meni prikazan kao na slici. Kliknite na "Otpremi datoteke..."

Sledeci korak je da iz vaseg kompjutera izaberete PDF dokument koji zelite da dodate.

Pritiskom na dugme 'Open' otpremanje odabrane datoteke ce poceti. To obicno traje minut ili dva, sve zavisi od velicine datoteke i brzine vaseg interneta.

Kada se upload zavrsi, kliknite na ime datoteke koju ste dodali i ona ce vas odvesti na novu stranicu.

Pre nego sto ugradite zeljeni dokument na vasu stranicu/blog, potrebno je promenite dozvolu datoteke u javnosti. Promenu vrsite tako sto kliknete desnim klikom na zeljeni dokument i izaberete opciju 'Deli...'

Otvorice vam se prozor za deljenje sa ljudima. Vi cete kliknuti na opciju 'Napredno' koja se nalazi u donjem desnom uglu prozora.

Kada ste kliknuli na opciju 'Napredno' otvorice vam se nov prozor.

Ovde mozete videti link za deljenje samo sa saradnicima. Datoteku trenutno mozete videti samo vi (Privatno). Mi zelimo da odabranu datoteku delimo sa sa svima na webu, a to cemo promeniti tako sto kliknemo na opciju 'Promeni'.

Izaberite opciju 'Ukljuceno - javno na vebu' i sacuvajte promene.

Nakon promene podesavanja dozvola o deljenju, sada je vreme da uzmete vas link za deljenje.

Sada desnim klikom idemo na zeljeni dokument i izaberemo opciju za 'Deli...'. Postupak mozete videti na slici iznad. Kopirajte link.

Ono sto je sada potrebno jeste da u ovom kodu koji cu ostaviti dole za deljenje zamenite vasim linkom koji ste kopirali.

<iframe src="https://drive.google.com/file/d/0B9Jlfj07XxktS3JYZ3lYTkVQVk0/view?usp=sharing" width="600" height="300"></iframe>

Zeleni link zamenite vasim.

Sada ostaje samo da ga dodate na vasu stranicu.

Sacuvajte o objavite. To bi bilo to. :)

Continue Reading →

Animirano dugme "Idi na vrh"

Kako dodati dugne "Idi na vrh" ili "Povratak na vrh stranice" ?

U ovom clanku cu vam pokazati kako da dodate na vas blog prelepo animirano dugme u obliku rakete za vracanje na vrh stranice. Idealan widget ukoliko imate duze clanke na vasem blogu. Uz samo jedan klik bicete na pocetku stranice.

U nastavku cu ostaviti HTML/JavaScript kod koji mozete da kopirate:

/* Widget by bloggerisanje.blogspot.com */


<div class="scroll-top">

<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />

  <span class="flame"></span>
  <span class="flame"></span>
  <span class="flame"></span>
</div>


<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}

.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>


<script type="text/javascript">
// Scroll to top button
    wnHeight = jQuery(window).height();
    //Check to see if the window is top if not then display button
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > wnHeight/2) {
            jQuery('.scroll-top').fadeIn();
        } else {
           jQuery('.scroll-top').fadeOut().removeClass('scrolling');
        }
    });

    //Click event to scroll to top
    jQuery('.scroll-top').click(function(){
        jQuery('html, body').animate({scrollTop : 0},800);
        jQuery(this).addClass('scrolling');

    });

</script><!-- Widget  by bloggerisanje.blogspot.com -->

• Potrebno je da odete na opciju Izgled > Dodaj gadget > HTML/JavaScript
• Kopirajte i nalepite kod > Sacuvaj.

To bi bilo to. :)

Continue Reading →

Kako dodati Sitemap stranicu na vasem blogu?

Dodavanje Sitemap stranice (Sadrzaj) na blogu

HTML Sitemap ili sadrzaj pokazuje organozovanu listu postova koji se nalaze na vasem blogu. U ovom clanku cu vam objasniti kako da u par jednostavnih koraka dodate vasu Sitemap stranicu koja ce olaksati vasim citaocima da se lakse snadju.

1. Idite na Blogger i ulogujte se na vas Account
2. Idite na opciju Stranice. Napravite novu stranicu i dodelite joj ime koje zelite, kod mene je to "Sadrzaj"
3. Kopirajte sledeci kod:

<style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #dddddd;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}.labl{color:#eb3131;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#eb3131 0%,#eeeeee 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#eb3131),color-stop(1,#f06060));border:1px solid #transparent;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}.labl a{color:#fff;}.labl:first-letter{text-transform:uppercase;}.new{color:#444444;font-weight:bold;font-style:none;}.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#eeeeee));}.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br /><div id="toc"><script src="https://rawgit.com/101Helper/docs/master/sitemap.js" type="text/javascript"></script><script src="https://bloggerisanje.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

-Potrebno je da ga nalepite na vasoj stranici tako sto cete klinkuti na opciju HTML koja se nalazi u gornjem levom uglu.
-Sada je potrebno da samo zamenite moj link sa vasim koji je oznacen https://bloggerisanje.blogspot.com
-Sacuvajte stranicu, objavite i to bi bilo to.

Ovde mozete da vidite kako to izgleda.

Continue Reading →

HTML Kontakt Forma

Obrazac za kontakt na posebnoj stranici

U ovom tutorijalu ću vam pokazati kako možete da dodate zaista sjajnu sa cool izgledom kontakt formu na vašoj stranici. Ovaj kontakt formular izgleda zaista elegantno i veoma dopadljivo.

Dodavanje CSS koda:

• Ulogujte se na Blogger Account > Kontrolna tabla vaseg bloga
• Sada je potrebno da kliknete na opciju Šablon > Izmeni HTML i da pronađete ]]></b:skin> tag i odmah iznad njega da nalepite sledeći css kod

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHJEexX7d4-2hvZBPxi4eUxQjmX_C4TgDF7AizX3gajPdSe3vogYxl99PCPopLmGcVwb4NORrOofy-FtioWNH0waDnKwdQxt7-Eptsrpa60Vx0Hz_pF5qufsa00jeEEuCwHa6rzpQkc/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_EVGhVNsOZImhsyhS1VKumfcCrPeHn2QYb02P0RoEL6GepKFkeCFIAcyzQpzsIwTBlEUj_3ifyYQ6NTSVoyrFdBzi6zWcttA_0PqhtNN7HEH5He0bdTjeaz9blxhS2C_MWEjHbUTBFk/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5Ldje9aFedPZ0GU6mUj9OjSGliy-Qsom-POS6f2HKdY7Y0KGtWMqZuoGkyzdUeSz2Iwr6PCQnnJrh_7iHNB1X26XDJnOJfHdfwGqKkXvYfEb9pDXNrtE0_1_kCi-H80bC3muJ3DrJAk/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

• Kada ste ga dodali sačuvajte i vratite se na kontrolnu tablu.

Dodavanje HTML na stranici

• Prvo moramo da kreiramu novu stranicu na blogu, a to ćete uraditi na sledeći način: Kliknite na opciju Stranice > Nova stranica > Stranicu ostavite praznom. Kada se stranica otvori kliknite na opciju HTML i nalepite sledeći kod:

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

• Posle dodavanja koda iznad, objavite stranicu. 

To je to! Sada vi i vaši posetioci možete da vidite ovaj elegantan kontakt obrazac na vašem blogu.

Continue Reading →