Bloggerisanje | Blog Saveti i Trikovi, Tutorijali, Widgeti Za Blog, SEO, Alati

Besplatan blog u 6 koraka

noreply@blogger.com (Dijeta Keto) — Mon, 27 Nov 2017 18:18:00 +0000

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

Pokretanje bloga na Blogger.com je besplatna i jednostavna za pokretanje.
Platforma je u vlasnistvu Google-a, tako da imate poverenje i kredibilitet.
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.
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:

Kreiranje Blogger naloga
Izbor imena bloga i teme
Optimizacija Blogger Bloga
Uredjivanje teme i rasporeda
Objavljivanje vaseg prvog sadrzaja
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.

5 Najboljih HTML Editora Za Windows

noreply@blogger.com (Dijeta Keto) — Thu, 25 May 2017 19:51:00 +0000

5 najboljih HTML editora koji su potpuno besplatni.

Ukoliko zelite da razvijete sajt, moracete da koristite HTML editor. Vi naravno mozete koristit i Window Notepad za izgradnju sajta, ali to bi bilo poprilicno tesko i neudobno. HTML editor mora da odradi dve stvari veoma dobro, a to su sintakse (obojenost koda) i automatsko dovrsavanje. Ima to jos dosta funkcija koje su nam potrebne, ali ove dve su dosta bitne. Ja sam izabrao, po meni 5 najboljih editora za Windows.

#1 Notepad++

Notepad++ je moj omiljeni besplatan editor za editovanje tekstualnih fajlova i pisanje koda. Ovaj program je potpuno besplatan i mozete ga preuzeti besplatno sa njihove stranice - ovde.

Podrzava vise programskih jezika pod Windows okruzenjem, kao sto su: C, C++, Java, C#, XML, HTML, PHP, Javascript, RC file, makefile, nfo, doxygen, ini file, batch file, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, Unix Shell Script, Fortran, NSIS and Flash action script.

Notepad++ je ustvari nesto izmedju klasicnog Window Notapade-a i WordPad-a. Prednosti u odnosu na WordPad je podrska za rad sa tabovima, mozda cak i najvaznija prednost i to vam omogucava da radite sa vise fajlova istovremeno. Jos jedna od prednosti je numerisanje linija koda, tako da uvek mozete lako da se snadjete.

Notepad++ je napisan u programskom jeziku C++ i koristi cist Win32 API i STL koji osigurava vecu brzinu izvrsavanja i manju velicinu programa.

#2 Komodo Edit

Postoje dve verzije na raspolaganju, Komodo Edit i Komodo IDE. Komodo Edit je open source i preuzimanje je besplatno.

Komodo Edit je veoma dobar tekst web editor. To ukljucuje puno odlicnih karakteristika za HTML i CSS razvoj.

Komodo koristi Mozilla i Scintilla bazu kodova jer oni dele mnoge karakteristike i podrsku istih jezika (ukljucujuci, Perl, PHP, Руби, Tcl, SQL, Smarty, CSS, HTML i XML) i operating systems (Linux, OS X i Windows). Komodo Edit mozete preuzeti - ovde.

#3 Eclipse

Eclipse je besplatan program, otvorenog koda, za razvoj softvera i razlicitih aplikacija. Ovaj program je pogodan za ljude koji rade puno kodiranja na razlicitim platformama sa razlicitmi jezicima.

Moze se reci i da predstavlja standardnu platformu koja je prvenstveno namenjena za mobilne programere, programiranju za Android operativni sistem, a moze se koristiti i za rad sa PHP-om i drugim programskim jezicima, ukljucujuci C, C++, Perl, Python, Ruby, Ada, COBOL itd. Tamo su i Java, JavaScript i PHP pluginovi, kao i dodatak za mobilne programere.

Eclipse mozete preuzeti - ovde.

#4 SynWrite

SynWrite je jos jedan besplatan program, otvorenog koda, za pisanje i uredjivanje tekstualnih fajlova i kodova.

Prvenstveno namenjen programerima, webmasterima, html editorima, a potom i svim ostalim korisnicima koji zele da se isprobaju u razvijanju razlicitih projekata.

Podrzava rad sa preko 70 programskih jezika, podrzava vise kodiranja, podrzano snimanje, postavljanje i pokretanje makronaredbi, integracija sa spoljasnjim alatima i dodacima napisanih u Python programskom jeziku, omogućeni pregled izvornog koda u vidu stabla, posedovanje prilagodljivih precica, visejezicni interfejs itd...

SynWrite sigurno spada medju najbolje programe za obradu tekstualnih fajlova. Preporucujemo.

SynWrite mozete preuzeti - ovde.

#5 Aptana Studio 3

Aptana je IDE (IDE – integrisano razvojno okruzenje) (IDE je - Integrisano razvojno okruzenje poznato i kao IDE (engl. Integrated Development Environment) je softver koji programerima pruza sirok skup objekata za razvoj softvera.) otvorenog koda i potpuno sveobuhvatno, besplatno resenje napisano u Javi i dostupno za Linux, Mac i Windows operativne sisteme. Veoma je mocan i popularan alat sa pregrst funkcija koje programeru mogu olaksati rad. Isprobajte!

Aptanu mozete preuzeti - ovde.

Kako zaraditi od reklama na blogu?

noreply@blogger.com (Dijeta Keto) — Thu, 25 May 2017 16:56:00 +0000

6 najboljih oglasnih mreza za zaradu

Novi ste bloger i u potrazi ste za oglasnom mrezom koja vam omogucava da unovcite svoj blog?

Onda je ovo pravo mesto za vas!

U ovom postu cu napisati 6 najboljih oglasnih mreza koje brzo odobravaju pristup i na kojima mozete da zaradite novac.

AdSense je ubedljivo najbolja platforma zbog kvaliteta njihovih oglasa, ali veliki problem oko odobravanja pristupa. Iako pise da vas domen mora biti star najmanje 6 meseci kako bi ste pristupili, to je samo mit.

Jedinstven sadrzaj nije jedini faktor za odobrenje AdSense-a. Postoje mnogi drugi faktori koje zeli AdSense da vidi pre nego sto vam odobri pristup. Mali blogovi obicno ne mogu dobiti AdSense odobrenje, ali ja cu vam napisati u nastavku nekoliko oglasnih mreza za nove blogere.

Postoje dosta oglasnih mreza, ali nisu sve oglasne mreze tako dobre. Neke oglasne mreze mogu prevariti korisnike tako sto odbijaju da im plate zaradjen novac.

Ovo su 6 pouzdanih oglasnih mreza na kojima gotovo sigurno dobijate pristup i tako zaradite od vasih stranica.

#6 PropellerAds

PropellerAds je CPM mreza koja je odlicna za nove, male blogove i za blogove koji su osrednji po velicini.

Napravite oglas
Postavite ga na vas blog
Zaradicete negde izmedju $1-$4 za 1000 prikaza.

Minimalna isplata je $100.

Isplate se vrse preko Paypal naloga, Payoneer racuna i drugih metoda..

Ovde se mozete registrovati.

#5 RevenueHitsRevenue Hits

Ova oglasna mreza se malo razlikuje u odnosu na druge oglasne mreze na ovoj listi.

Ova mreza nudi razne metode, postavljanje banera na vas blog, slider, popunder, kao sto mozete da vidite na slici iznad..

Placaju $10-$50 po akciji.
Minimalna isplata je $50
Isplate se vrse preko Paypala, Payoneer ili bankovnog transfera
Instant aktivacija naloga

#4 Bidvertiser

Osnovana je 2002, Bidvertiser je jedna od najstarijih oglasnih mreza.

Oni imaju sirok spektar formata oglasa.

Minimalna isplate je $10 preko Paypala, $20 cekom, a $50 preko bankovnog transfera.

Registracija.

#3 Chitika

Chitika je jedna od najboljih AdSense alternativa. Vremenom i sa napretkom nove tehnologije, mnoge druge mreze su zamenjene Chitikom.

Chitika je dosta popularna medju novim blogerima. To je zato sto je minimalna isplata preko paypala $10, jednostavan interfejs za koriscenje i nema minimalni uslov saobracaja.

Jedina stvar koju morate da znate, to je da Chitika ne tolerise ako klikcete na njhove oglase, moze se desiti da vam trajno banuju nalog. Kada se prijavite, potrebno je neko vreme za ne/odobrenje.

Registracija.

#2 Infolinks

Infolinks je jos jedna oglasna mreza koja je popularna i takodje, veoma prijatna za pocetnicke blogere.

Infolinks nudi vise vrsta oglasa, ali najpopularniji su po svojim oglasima u tekstu.

Minimalna isplata je $50

Registracija.

#1 PopAds

PopAds je vrhunska, po meni jedna od najboljih oglasnih mreza. Pogotovo za male blogove, jer nemaju minimalne uslove saobracaja.

Poceli su sa radom 2010. Oni omogucavaju sve vrste blogova, ukljucujuci i one ilegalne, porno sajtove i druge stvari vezane sadrzaj "za odrasle".

Odobrenje je instant.

Visoke CPM rates u poredjenju sa drugim mrezama
Nema minimalan uslov saobracaja
Minimalna isplata je $5
Jedina mana je mozda ta sto se isplate vrse samo preko Paypala.

Registracija.

Optimizacija Slika - Optimizujte vase slike na sajtu

noreply@blogger.com (Dijeta Keto) — Thu, 25 May 2017 14:26:00 +0000

Svi znamo da bez odgovarajuce SEO optimizacije, kako On-Page, tako i Off-Page, vasi clanci se nece dobro plasirati na prvim stranama Google-a.

Medjutim, neki blogeri su sigurni kako je njihov clanak potpuno optimizovan za pretrazivace, ali su slike koje koriste u clanku nisu ni blizu optimizovane kako treba.

Optimizacija Slika je jedan od najvaznijih faktora koji trebate uzeti u obzir, zato sto mnogi ljudi traze popularne slike i ako slike koje koristite na vasem blogu budu rangirane kako treba, onda mozete dobiti puno posetilaca.

U ovom clanku cu se u potpunosti fokusirati na Optimizaciju slika.

Zasto vam je potrebna Optimizacija Slika?

Postoje mnogi razlozi za optimizaciju slika. Slike koje koristite na vasim stranicama, clancima ce poboljsati vas SEO rezultat, takodje, da bi vas clanak bio jos bolje plasiran na pretrazivacima, page loading ili brzina ucitavanja stranice zavise od optimizacije slika.

Benefiti Optimizacije Slika:

Slike ce se pojaviti u pretrazivacima i posto je konkurencija u odeljku images (google images) mnogo manja, mozete lako dobiti bolji rang vasih slika sa pravilnom optimizacijom.
Poboljsava stopu posete vaseg bloga i povecava SEO rezultet vaseg clanka.
Ako kreirate prilagodjene slike, vrlo je lako da ce biti i povratnih linkova (backlinks), tako sto ce neki blogovi koristiti vase slike u clancima i tako vam omoguciti izvor novih poseta ka vasoj stranici.
Photo-sharing na razne sajtove poput Pinterest-a moze dovesti do ogromne kolicine saobracaja ka vasem sajtu.

Pronalazenje pravih slika za vas blog

Svi mi koristimo slike u nasim clancima i pre nego sto pocnemo sa pravim stvarima u cilju sto bolje optimizacije slika, zeleo bih da podelim sa vama neke resurse na kojima mozete dobiti slike besplatno.

Kada se radi o slikama, morate biti veoma pazljivi dok ste u potrazi za njima. Ne mozete da koristite bilo koje slike sa Google Slika da izaberete bilo koju i dodate je u svom clanku. Slike mogu biti zasticene i tako mozete da upadnete u nevolju njihovim koriscenjem.

Umesto toga, mozete koristiti razlicite sajtove koji pruzaju slike za besplatno preuzimanje. Takve sajtove mozete koristiti u pronalazenju slike koja bi savrseno odgovarala sadrzaju vaseg clanka.

Psotoje sajtovi poput FreeDigitalPhotos, MorgueFile, PixaBay, idt.. koji omogucavaju koriscenje besplatno fotografija kao i ShutterStock gde mozete dobiti visok kvalitet i profesionalne slike uplatom od par dolara.

Mozete da koristite free sajtove ili placene sajtove da nadju pravu sliku za vas clanak.

Bilo bi jos bolje ako sami kreirate neke slike za vas blog.

Na taj nacin, niko vas nece smarati, imate sva prava na vasim slikama, zato sto ste ih stvorili sami.

Kreiranje svoje slike

Ako niste u mogucnosti da pronadjete odgovarajucu sliku na StockPhoto sajtovima, zelite da kreirate svoju sliku, onda mozete da koristite online internet stranice za te stvari kao npr Canva.

Canva je najbolja platforma, posebno za one koji nisu dizajneri, za stvaranje slika. Mozete naci dosta gotovih sablona. Vro je lako da se snapravi slika bilo koje velicine i dimenzije.

Kako da optimizujete slike za pretrazivace?

#1 Biranje pravog imena slike

Pre nego sto dodate novu sliku vasem clanku, moracete da proverite ime slike pre nego sto je uploadujete. Video sam dosta blogova na kojima imena slika nemaju nikakve veze sa sadrzajem teksta ili imena koja nemaju nikakvog smisla.

Morate promeniti ime slike ako zelite da se vasa slika rangira kako treba. Izbor imena slike obicno treba da bude kljucna rec za sadrzaj koji se tice vaseg teksta.

Na primer, ako pisete clanak "Odrzavanje travnjaka u dvoristu", ime vase slike bi trebalo biti "odrzavanje-travnjaka-u-dvoristu.jpg" ili nesto slicno ovome.

To bi trebalo da ima smisla za vase citaoce, kao i za pretrazivace.

Jos jedna bitna stvar, uverite se da ste stavili crtice izmedju dve reci, izbegavajte pisanje reci bez razmaka izmedju njih. To ne bi trebalo da izgleda ovako - "odrzavanjetravnjakaudvoristu,jpg". Nema nista lose u tome ako napisete u ovom formatu, ali bolje je, preglednije i citljivije je izabrati nacin sa crticama.

Pogresan format - "ABCD123.jpg"
Dobar format - "odrzavanjetravnjakaudvoristu.jpg"
Savrsen format - "odrzavanje-travnjaka-u-dvoristu.jpg"

#2 Velicina slike i kompresija

Sledeca stvar o kojoj trebate da vodite racuna pre dodavanja slike su velicina i dimenzije. Ne morate da postavljate velike slike u vasim clancima, jer one ostavljaju veliki teret serverima i kao rezultat toga, vasa brzina ocitavanja ce se smanjiti.

Vreme ucitavanja vase stranice je izuzetno vazan faktor sa SEO tacke gledista, i ne zelite da se vase ucitavanje stranica oduzi dodavanjem velike slike.

Velicina slike:

Po meni, velicina slike koju postavljate treba da bude najmanje 200 x 200px tako da bude pogodno i za drustvene mreze kao sto su Facebook, Google+, Twitter...

Vi naravno, mozete da ubacite i manju sliku ili vecu u clanku u zavisnosti od vasih potreba. Navedene dimenzije su pomenute zbog toga sto su to minimalni zahtevi za slike da bi se postavila na drustvenim mrezama.

Kada se radi o velikim slikama, proverite sirinu sadrzaja povrsine vaseg bloga.

Vecina sablona za blog dolazi sa tim nekim sirinama oko 600-700px ili mozda manje ili vise, u zavisnosti od teme, tako da, proverite da li se vasa sirina slike uklapa lepo vasim sablonom.

Ako ste slucajno preuzeli sliku sa StockPhoto sajta koja ima ogromne dimenzije, najbolje bi bilo da se velicina promeni u odgovarajucu, a zatim da postavite.

Ako ste dodali neku originalnu sliku i zatim promenili velicine na postu, to i nije bas dobra ideja. Kada se stranica ucita na vasem browseru, slika ce se prvo ucitati sa originalnim dimenzijama, pa ce tek nakon toga biti promenjena dimenzija. To naravno samo povecava preme ucitavanja vase stranice sto nije dobro.

Postoje puno online alata za promeni velicina slika pre nego sto ih otpremite na vas blog, na primer, PicResize, PicMonkey.

Kompresija slika

Kada koristite slike visokog kvaliteta, vi stvarate pritisak serverima oko ucitavanja slika.

Ako je, na primer, vasa slika ima ogromne cifre u KB ili mozda cak i MB, to je zato sto je kvalitet slike ogroman.

Postoje alati poput TinyPNG, koji vam pomaze da izvrsite kompresiju slika kako bi se smanjila velicina. Cak i nakon kompresije slike, to nece uticati mnogo na vas kvalitet slike. Slika ce i dalje izgledati dobro, nece biti izoblicena ili pikselizirana.

Rezultat nakon kompresije slike

Napomena: Ako pisete clanke u kojima delite visokokvalitetne slike, kao i wallpapers kolekcije (pozadine), onda je najbolje da uploadujete te slike na Dropbox ili neki drugi slican sajt. Tada mozete da u vasim clancima psotavite slike sa promenjenim, optimizovanim velicinama, a zatim ih povezati sa Cloud servisom koji ste izabrali za upload originalnih slika, tako da vasi posetioci mogu videti. Na ovaj nacin obezbedjujete visokokvalitetne slike, a da ne ugrozite brzinu vasih stranica.

#3 Alternativni tekst (Alt text)

Osnovna svrha Alt teksta je da pruzi dodatni opis vasih slika. Ako se slike ne prikazu iz nekog razloga, alt tekst ce se pojaviti na njihovo mesto i opisace sadrzaj slike.

Druga upotrba Alt teksta jeste da kaze pretrazivacima da je slika prisutna na tom mestu. Pretrazivaci nisu u stanju da citaju slike i ako se ne koristi alt tekst na vasim stranicama, propusticete dosta saobracaja.

Pretrazivaci takodje koriste Alt tekst za rangiranje najboljih slika. Vecina ljudi pokusava da se probiju na najvisi polozaj na pretrazivacima, ali oni jednostavno ignorisu ili zaborave da odrade ovaj deo posla za slike kako bi se vas clanak sto bolje optimizovao i bio u SEO prednosti sto se tice konkurencije.

Kako odabrati pravi Alt Tekst?

Sada znate koje su prednosti i znacaji Alt tekstova, a da li znate sta bi trebalo da sadrzi jedan Alt tekst?

Alt tekst je najbolje mesto da ubacivanje kljucnih reci kako bi se povecale sanse za sto bolje prijavljivanje vasih slika u pretragama.

Medjutim, morate biti sigurni da je slika pogodna za vas alt tekst. Na primer, nikada nemojte dodavati sliku macke u svom clanku, a upisati alt tekst "najbolji SEO alati besplatno" To jednostavno nema nikakvog smisla.

Koristite odgovarajucu sliku koja opisuje temu vaseg clanka, dodajte kljucne reci u alt opisu da bi bilo vidljivo u pretrazivacima i da bi se sto bolje rangirali.

Kako da dodate Alt tekst na slikama?

Kada ste dodali vasu sliku, kliknite na nju. Pojavice vam se meni za podesavanje slike, potrebno je da kliknete na "Svojstva".

Otvorice vam se jedan prozorcic sa dve rubrike po nazivu "Naslovni tekst" i "Alternativni tekst". U obe rubrike uneti kljucne reci koje opisuju vase slike i vas sadrzaj. Na taj nacin citaoci koji ukucaju neku rec koja se odnosi na opis vase slike, najverovatnije je da ce videti i vasu sliku.

Formati slika - JPEG, PNG ili GIF?

Postoje vise vrsta formata na raspolaganju kao sto su JPEG (JPG), PNG, GIF. Uglavnom vam je to manje vise poznato, i verovatno vam je najpoznatiji format JPG, ali ponekad koristimo i formate PNG i GIF.

JPEG format - JPEG forma je najbolji format koji se koristi da digitalne fotografije i najrasprostranjeniji je.
PNG format - Ovaj format se isto dosta koristi, vrlo je dobar jer ne gubi kvalitet i nudi neverovatnu kompresiju fotki. To bi znacilo da ako editujete neku sliku vise puta, promenite velicine ili kompresujete je, ona nece izgubiti nikakve podatke i nece izgubiti na kvalitetu.
GIF format - Ovaj format je popularan uglavnom zato sto podrzava male velicine slike.

Od svih formata slike, najbolji format za koriscenje je JPEG. Razlog tome je vrlo jednostavan. JPEG formati su relativno manji u velicini, sto znaci da ce se slike ucitati brze. Ovaj format je najbolji za koriscenje u vasim postovima.

Natpis slika:

Natpis slike je opisni tekst koji se pojavljuje odmah ispod slike u vasem clanku. Mozete ga koristiti kako biste dodatno opisali vasu sliku ili mozete cak i da dodate link.

Prilagodjene oznake zaglavlja robota - Podesavanja za Blogger

noreply@blogger.com (Dijeta Keto) — Tue, 23 May 2017 22:11:00 +0000

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. :)

7 Osnovnih On Page SEO saveta za blog

noreply@blogger.com (Dijeta Keto) — Tue, 23 May 2017 20:41:00 +0000

On Page SEO Optimizacija sajta - Sta je on page SEO optimizacija? On page optimizacija sajta je jedna od najbitnijih stavki SEO optimizacije sajtova za pretrazivace. Odnosi se na optimizaciju same stranice, to znaci da se izvodi na samom sajtu - stranici.

Optimizacija za pretrazivace (SEO) je najvaznija stvar koja se mora nauciti za najbolje blogging iskustvo. Bez odgovarajuceg znanja iz optimizacije, mozemo samo sanjati o vrhunskoj poseti i impresijama na blogu. Zato cu u ovom postu napisati 7 saveta za On-Page optimizaciju. Ovih 7 stvarcica bi svaki bloger morao da zna.

Dakle, hajde da pogledamo neke od najboljih On-Page saveta za uspesno bloggerisanje.

On-Page SEO Optimizacija

On-Page SEO saveti za Blog

Ispod su saveti i trikovi koji ce vam biti od koristi da optimizujete vas blog za Google i druge pretrazivace. Procitajte ih pazljivo i primenite ih sve na svom blogu kako bi vas blog bio voljen od strane citaoca i vredan za pretrazivace.

#1 Prilagodjene oznake zaglavlja robota

Postoje podesavanja za blogere da licno mogu da se podese na blogu da bi vas blog bio SEO Frlendly. Upravo je Custom Robots Header Tags setting (Prilagodjene oznake zaglavlja robota) jedan od njih. Ovi obelezivaci se koriste za psotavljanje oznaka zaglavlja robota koje se prikazuju pretrazivacima.

#2 Prilagodjeni Robot.txt

O ovome sam vec pisao i ovde mozete procitati taj clanak cemu sluzi i kako se podesava robot.txt.

#3 Optimizacija naslova posta

Ako ste skoro poceli sa pisanjem i pravljenjem bloga na podrazumevanim sablonima koje nudi Blogger, onda cete definitivno biti svesni sa cinjenicom da vasi post naslovi nisu pravilno optimizovani za pretrazivace. Potrebno je da promenite neke stvari na vasem sablonu kako bi naslov posta bio pravilno optimizovan. Videcete znatne promene i poboljsanja u organskom saobracaju na vasem blogu.

#4 Optimizacija slika

Verovatno ste primetili relevantne slike izmedju pasusa na mnogim blogovima. Slike ne poboljsavaju samo izgled naseg sadrzaja, one igraju vaznu ulogu u optimizaciji bloga. Ako napravimo efikasnu upotrebu slika u clancima, onda mozemo postici i dodatni saobracaj iz pretrazivaca.

#5 Interni linkovi

Mnogi blogeri ne optimizuju svoje unutrasnje linkove (veze) ili cak ne povezu svoje clanke medjusobno. Ovo je zaista velika greska koju moramo izbeci. Interna povezivanja ne samo da povecava preglede nasih stranica, vec i pomaze da se sto bolje rangiramo u pretrazivacima. Ukoliko ste ovakve greske pravili, vreme je da ih ispravite.

#6 Search Engine Submission (Prijava na Google Webmaster)

Kada smo zavrsili sa optimizacijom, sada moramo prijaviti nas blog na Google Alatke Za Webmastere. Provera i prijava na Google Alatke za Webmastere nam pomaze da nase stranice na blogu, Google sto brze indeksira. Ova alatka nudi razne, korisne i neophodne stvari za nas blog/sajt, daje nam odgovore na razna pitanja, HTML poboljsanja, ukazivanje na neke greske, neposotojece veze koje trebamo da ispravimo. Pre nego sto se prijavite, trazice vam da potvrdite vlasnistvo sajta ili bloga, posaljete sitemap i to je to.

#7 Brzina ucitavanja vasih stranica

Ako vasem blogu treba dosta vremena da se ucita, posetioci koji su posetili vas blog, verovatno i nisu bas strpljivi sto se tice cekanja da se neka stranica ucita, sto bi u prevodu znacilo, poseta se smanjuje, a to nikako ne bismo zeleli. Pretrazivaci takodje daju prednost "Fasto Loading" stranicama kako bi poboljsali takozvana " best user experience". Zato je veoma vazna optimizacija brzine ocitavanja bloga/sajta. Preterano dodavanje slika, flash dodaci umeju da uspore vas blog, tako da nemojte preterivati.

Nadam se da sam uspeo da vam, koliko toliko pomognem oko nekih osnovnih stvari sto se tice On Page SEO optimizacije.

Sitemap za "Staticke stranice" - Blogger

noreply@blogger.com (Dijeta Keto) — Tue, 23 May 2017 17:47:00 +0000

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...

Dodavanje pokretnog naslova stranice na vas blog

noreply@blogger.com (Dijeta Keto) — Mon, 22 May 2017 20:06:00 +0000

Kako dodati pokretni naslov stranice na vas blog koristeci JavaScript?

U ovom postu cu vam pokazati kako da dodate pokretni naslov stranice na statusnoj traci.

Ulogujte se na vas Blogger Account
Iz menija izaberite opciju "Tema"
Kliknite na opciju "Izmeni HTML"

Pronadjite (crtl+f) sledeci kod </head> i iznad njega nalepite sledece:

<b:if cond='data:blog.pageType ==  &quot;index&quot;'><script>var title=&quot;  <data:blog.pageTitle/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script>  <b:else/><script>var title=&quot;  <data:blog.pageName/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script></b:if>

Sacuvajte.
Vas naslov ce biti pokretan.

SEO alat - Screaming Frog SEO Spider

noreply@blogger.com (Dijeta Keto) — Mon, 22 May 2017 19:11:00 +0000

Besplatan SEO program koji vam moze koristiti kako biste otkrili i otklonili greske na vasim stranicama sajta ili bloga

Screaming Frog SEO Spider je alat koji ce vam pomoci da analizirate vas sajt i otklonite greske za maksimalnu SEO optimizaciju. SEO Spider proverava detaljno vase web linkove, skripte, slike, CSS, aplikacije i identifikuje razne probleme na vasem sajtu kao sto su duple stranice, neispravni linkovi, analiza naslova stranica, generise sitemaps xml...

Ovde mozete preuzeti besplatnu verziju programa

Screaming Frog SE Spider

Provera linkova na vasem sajtu

noreply@blogger.com (Dijeta Keto) — Mon, 22 May 2017 17:31:00 +0000

Besplatan SEO alat za proveru linkova na vasem sajtu - brzo i jednostavno pronadjite neispravne linkove na vasem sajtu/blogu.

Imati sajt nije samo pitanje kreiranja nekog html dokumenta, otpremiti ga na svoj web prostor, a zatim zaboraviti sve o tome. Web sajtovi zahtevaju odredjene poslove odrzavanja, a jedan od tih poslova jeste provera vasih veza/linkova kako bismo bili sigurni da sve potpuno radi, sto je veoma bitno za vase posetioce.

Xenu's Link Sleuth - je sto je najbitnije, besplatan i veoma koristan, po meni cak i najbolji programcic za proveru mrtvih/neispravnih linkova koji se nalaze na vasem sajtu. Ovaj jednostavan i mocan alat skenira vase stranice temeljno i proverava svaki link da li pravilno funkcionise. Xenu proverava ne samo normalne tekstualne linkove, vec i slike, CSS fajlove, skripte, java aplete, plug-inove i frejmove... Za vrlo kratko vreme cete dobiti spisak svih ispravnih i neispravnih/mrtvih linkova koji se nalaze na vasem sajtu.

Program mozete preuzeti - ovde.

Mozete proveriti online vas sajt ili stranicu po stranicu lokalno, na racunaru. Neispravni linkovi bice vam oznaceni crvenom bojom, a ispravni zelenom.

Jednostavni navigacioni meni za vas blog

noreply@blogger.com (Dijeta Keto) — Sun, 21 May 2017 22:25:00 +0000

Crveni navigacioni meni

Uz samo par jednostavnih koraka postavite ovaj jednostavni, vrhunski navigacini meni na vas blog.

Ulogujte se na vas Blogger Account
Iz vaseg Blogger menija izaberite opciju "Izgled"
Kliknite na opciju "Dodaj Gadzet"
Izaberite "HTML/JavaScript"
Nalepite sledeci kod

<style type="text/css">
body {
background-color:#111;
margin:0px 0px;
padding:50px; 
}

#shutter-menu {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase; 
}

#shutter-menu ul {
height:50px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden; 
}

#shutter-menu li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px; 
}

#shutter-menu a,
#shutter-menu a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#shutter-menu a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:white;
background-image:-webkit-linear-gradient(top, #ddd, white);
background-image:-moz-linear-gradient(top, #ddd, white);
background-image:-ms-linear-gradient(top, #ddd, white);
background-image:-o-linear-gradient(top, #ddd, white);
background-image:linear-gradient(top, #ddd, white);
border-top:2px solid rgba(0,0,0,0.2);
color:#333; 
}

#shutter-menu a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>

<nav id="shutter-menu">
<ul>
<li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="About">About</a></li>
<li><a href="#" data-clone="Portfolio">Portfolio</a></li>
<li><a href="#" data-clone="Comments">Comments</a></li>
<li><a href="#" data-clone="Contact">Contact</a></li>
</ul>
</nav>

Sacuvajte.

Na mestu gde se nalazi # ubacite vas url koji zelite

Takodje mozete izmeniti i staviti naziv kartica koji vama odgovara.

Tema za Blogger platformu - Grid Mag Orange

noreply@blogger.com (Dijeta Keto) — Fri, 19 May 2017 19:42:00 +0000

Jos jedan prelep sablon za Blogger platformu koji mozete preuzeti besplatno.

Demo

Preuzmi

Grid Mag Orange Blogger sablon

Ova tema ima 3 kolone, zaglavlje je podeljeno na dva dela, na desnoj strani postoji sekcija za baner oglas. Ova tema ima jedan na navigacioni meni na vrhu i jedan na dnu. Podnozje ove ovog sablona je podeljeno na tri dela, sto znaci da mozete dodati tri vidzeta u samom podnozju.

Instrukcije za promenu sablona mozete procitati ovde.

Registracija za Payoneer MasterCard - Tutorijal

noreply@blogger.com (Dijeta Keto) — Fri, 19 May 2017 16:17:00 +0000

Registracija za Payoneer MasterCard - Tutorijal - Korak po korak

Kako da narucim Payoneer karticu?

Payoneer MasterCard je brzo i jednostavno resenja za uplatu, primanje novca ili placanje sirom sveta. Ako ste Freelancer, Web Master, neko ko se bavi raznim online poslovima ili radite za neku online kompaniju, Payoneer je najbolja opcija. Ovu karticu mozete koristiti za bezbednu kupovinu preko interneta, kupovinu po prodavnicama u vasoj blizini, inostranstvu, bilo gde i bilo kada. Sa Payoneer karticom mozete povuci novac sa bilo kog bankomata sirom sveta brzo i jednostavno.

Prilikom registracije sa ove stranice dobijate $25 kada vase ukupne uplate dostignu iznos od $100.

Kako dobiti Payoneer MasterCard?

U sledecim koracima cu objasniti postupak registracije

Klikom na Sing Up pokrecete ragistraciju za Payoneer karticu (Kada uplate dostignu $100 dobijate $25)

Nakon klika na "Sing Up & Earn $25*" otvorice vam se nova strana

Izaberite opciju "Prepaid MasterCard Card"
Nakon toga vam se otvara prvi od cetiri koraka registracije

U prvom koraku popunjavate vase licne podatke (Ime, Prezime, Email adresa i Datum rodjenja)
Kada popunite, kliknite na "Next"

U drugom koraku popunjavate Kontakt detalje (Zemlja, Adresa i broj, Grad, Postanski broj i vas broj telefona)
Kada popunite kliknite na Next

Treci korak je korak gde upisujete zeljeni password i bezbedonosno pitanje i odgovor (iz padajuceg menija izaberite pitanje na koje trebate da napisete odgovor) Obavezno zapisite negde na papiru password, pitanje i odgovor da ne bi kasnije bilo problema oko logovanja na vas akaunt.
Kliknite na Next na zavrsni korak

Ovo je poslednji korak u kome iz padajuceg menija birate kako zelite da verifikujete nalog (Broj licne karte, Vozacke dozvole ili Pasos)
Cekirajte kao na slici ove tri rubrike i kliknite na Order.

Nakon toga, potrebno je sacekati par dana da bi pregledali i verifikovali nalog. Obavestenje dobijate na Email.

Nakon pregledanja, dobicete mail za odobrenje i da ce vasa kartica biti poslata na kucnu adresu.

To bi bilo to. :)

Kako da prebacite novac sa Payoneer naloga na racun u vasoj zemlji?

noreply@blogger.com (Dijeta Keto) — Fri, 19 May 2017 00:37:00 +0000

Prebacivanje novca sa Payoneer naloga na vas racun

Primili ste novac na Payoneer nalog i zelite da taj novac povucete na vas racun? U ovom clanku cu vam objasniti kako da povucete vas novac na vas racun u vasoj valuti.

Payoneer MasterCard kartica, je debitna kartica koja namenjena fizickim ili pravnim licima. Ova kartica se ne razlikuje od kartice koju dobijate u obicnoj banci prilikom otvaranja tekuceg racuna. Payoneer karticu mozete dobiti besplatno, jednostavnom registracijom na Payoneer sajtu – ovde.

Usluge Payoneer-a dostupne su u preko 150 zemalja i valuta, mozete povuci sredstva sa svog Payoneer naloga direktno na vas bankovni racun ili neku internet karticu, u lokalnoj valuti bilo kada i bilo gde.

Da biste prebacili novac sa Payoneer naloga na vas racun potrebno je da uradite sledece:

Prijavite se na vas Payoneer nalog
U glavnom meniju izaberite opciju Withdraw, a onda kliknite na To Bank Account

U slucaju da niste koristili ovu uslugu, potrebno je da dodate vas bankovni racun na koji zelite da prebacite novac.
Kliknite na opciju + ADD NEW

Potrebno je da popunite podatke, a oni ce vam verifikovati za nekoliko dana. Potvrdu cete dobiti na email adresi da je verifikovano.

Kada ste ovaj prvi deo popunili potrebno je da popunite registraciju

Posle popunjavanja ovih polja, stiklirajte obe rubrike i potvrdite.
Nakon ovoga cete morati da sacekate par dana zbog provere, a onda cete moci da prebacite vas novac na racun. Potvrdu dobijate mejlom.

U polju Withdrawal Amount, unesite koji iznos zelite da se povuce.

Obavezno polje je Description, tu morate napisati kratak opis povlacenja novca.

Nakon toga kliknite na Next.

Dobicete potvrdu mejlom o transakciji.

Kako dodati PDF na blog

noreply@blogger.com (Dijeta Keto) — Thu, 18 May 2017 18:39:00 +0000

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. :)

CSS3 download dugme za vas blog

noreply@blogger.com (Dijeta Keto) — Tue, 16 May 2017 19:56:00 +0000

CSS3 Download dugme za blogger

Ovo dugme se sastoji od CSS3, odnosno bez upotrebe bilo kakvih slika ili JavaScript-a. Ovo dugme moze biti zaista korisno za blogove koji nude preuzimanje nekog sadrzaja, softvera, igrica...

Ovde mozete pogledati kako to izgleda.

Dodavanje CSS koda u Sablon

Idite na vas blog
Idite na opciju iz menija Tema > Izmeni HTML
Pronadjite </body> (ctrl+f)
Sledeci kod nalepite iznad </body>

<style>

.abt-button {
    margin: 50px auto;
    width: 200px;
}

 /* Get this button at bloggerisanje.blogspot.com */ 

.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/ 
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/ 
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

Posle dodavanja koda sacuvajte i pratite sledeci korak.

Dodavanje dugmeta

Kada smo dodali CSS kod, trebamo da dodamo HTML na zeljeno mesto. Dakle, kada god zelite da dodate ovo dugme na neku stranicu ili na nekom postu, potrebno je da uredjivac prebacite na HTML opciju i nalepite vas HTML kod koji cu ostaviti ispod.

<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>

Posle dodavanje HTML-a potrebno je samo da na mestu gde je # dodate vas url za preuzimanje datoteke. Takodje, 1.2MB .zip promenite i stavite vasu velicinu datoteke.

To bi bilo to.. :)

Animirano ucitavanje stranica na blogu

noreply@blogger.com (Dijeta Keto) — Tue, 16 May 2017 13:51:00 +0000

Page Loading Effect na vasem blogu

Svaki bloger zeli da njegov blog izgleda sto bolje u odnosu na konkurenciju i tako stekne sto veci broj citalaca. Ovaj vidzet ce svakako dodati malo vise ozbiljnosti vasem blogu.

Ovaj vidzet radi tako sto kada vasi posetioci kliknu na bilo koju stranicu, post ili link, kada zeli da napusti trenutnu stranicu, ucitavanje ce biti animirano.

Kako radi ovaj vidzet mozete videti na samom blogu, samo jednostavno kliknite na bilo koji post.

Da biste dodali ovaj efekat na vas blog potrebno je da uradite sledece:

Idite na opciju Tema > Izmeni HTML
Pronadjite (ctrl+f) </body>
Iznad njega nalepite sledeci kod

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVCJt3JGOMZQjyU-UKDgEqdH_2-W9ecP_lFUEjfKChiPEasM49lcq5YdgppY8XizctcT0g_ukeB3r8kxBIUMvjLGjLP2DbmCby26Ka2YRO_he9W80laRrZjfIBokz5JIhRDHfM2Q60vo/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Posle dodavanja koda, sacuvajte.

To bi bilo to. :)

Animirano dugme "Idi na vrh"

noreply@blogger.com (Dijeta Keto) — Mon, 15 May 2017 22:03:00 +0000

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. :)

Kako dodati Sitemap stranicu na vasem blogu?

noreply@blogger.com (Dijeta Keto) — Sat, 13 May 2017 19:55:00 +0000

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.

Idite na Blogger i ulogujte se na vas Account
Idite na opciju Stranice. Napravite novu stranicu i dodelite joj ime koje zelite, kod mene je to "Sadrzaj"
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.

9 Fashion sablona za Blogger

noreply@blogger.com (Dijeta Keto) — Thu, 01 Dec 2016 22:37:00 +0000

9 prelepih Fashion sablona za Blogger

Ovde mozete preuzeti prelepe Fashion sablone za vas blog

1. Insight Blogger Sablon

Pogledaj sablon

Preuzmi sablon

2. Vogue Blogger Sablon

Pogledaj sablon

Preuzmi sablon

3. Trendmag Blogger Sablon

Pogledaj sablon

Preuzmi sablon

4. Olivia Blogger Sablon

Pogledaj sablon
Preuzmi sablon

5. Life-Fashion Blogger Sablon

Pogledaj sablon

Preuzmi sablon

6. Glam Up Blogger Sablon

Pogledaj sablon

Preuzmi sablon

7. Ecstacy Blogger Sablon

Preuzmi sablon

8. Blogstar Blogger Sablon

Pogledaj sablon

Preuzmi sablon

9. 1800 Minimal Blogger Sablon

Pogledaj sablon

Preuzmi sablon

Ovde mozete pocitati kako da promenite sablon na vasem blogu.

HTML Kontakt Forma

noreply@blogger.com (Dijeta Keto) — Thu, 28 Apr 2016 19:48:00 +0000

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.

Jedinstven šareni padajući meni - Blogger platforma

noreply@blogger.com (Dijeta Keto) — Wed, 27 Apr 2016 19:50:00 +0000

Ovo je jedinstven i prelep, šareni padajući meni. Na internetu možete naći razne padajuće menije za blogger platformu, raznih boja, različitog dizajna.. Međutim, na padajući meni sa karticama različitih boja sam retko nalazio. Sada ću vam predstaviti jedan takav meni koji možete da dodate na vaš blog.

DEMO

Idite na Blogger kontrolnu tablu > Šablon

Pronađite </head> tag

Dodajte sledeći kod iznad njega

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css">

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js"></script>

<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js" type="text/javascript"></script>

<style>

.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;

</style>Sada pronadjite </body> tag

Sada pronađite </body> tag
Dodajte sledeći kod iznad njega

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif", imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});

var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});

</script>

Sada sačuvajte šablon i idite na Izgled
Kliknite na Dodaj Gadžet i izaberite 'HTML/Javascript'
Nalepite sledeći kod.

<div class="menubar">
  <ul id="MenuBar1" class="MenuBarHorizontal">
     <li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li>
     <li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/" style="">Free blogger tricks</a>
     <ul id="destination1">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;">
        <li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li>
        <li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="desti_nav"><a href="#">Item 3.2</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
     </ul>
     </li>
     <li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/">CSS Tricks</a>
     <ul id="holidayt" >
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="holidayt" style="margin-left: 175px;margin-top: -2px;">
        <li id="holiday_nav"><a href="#">Item 3.1.1</a></li>
        <li id="holiday_nav"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="holiday_nav"><a href="#">Item 3.2</a></li>
       <li id="holiday_nav" ><a href="#">Item 3.3</a></li>
     </ul>
    </li> 
     <li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/">JQuery Menu bars</a>
     <ul id="retrivemy">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;">
        <li id="Retrivebk"><a href="#">Item 3.1.1</a></li>
        <li id="Retrivebk"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="Retrivebk" ><a href="#">Item 3.2</a></li>
       <li id="Retrivebk" ><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a>
     <ul id="makenanEnquery">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;">
        <li id="mkeinq"><a href="#">Item 3.1.1</a></li>
        <li id="mkeinq"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="mkeinq"><a href="#">Item 3.2</a></li>
       <li id="mkeinq"><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x;  margin-left: 1px;"><a id="navhd" href="#">Contact Us</a>
     </ul>    
  </div>

Sačuvajte HTML/Javascript' i to je to.

Kako dodati SlideShow

noreply@blogger.com (Dijeta Keto) — Mon, 25 Apr 2016 15:56:00 +0000

U ovom postu ću vam objasniti kako da dodate SlideShow na vašem blogu. Koristićemo CSS3 i HTML. Ovaj SlideShow učiniće vaš blog atraktivnijim, privlačnijim i lepšim, što automatski znači i više poseta.

DEMO

Pratite sledeća uputstva:

Ulogujte se na vaš Blogger Account
Kliknite na opciju Šablon > Izmeni HTML
Pronađite (ctrl+f) ]]></b:skin>
Dodajte sledeći kod iznad ]]></b:skin>

/* fade slider www.bloggerisanje.blogspot.com*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.bloggerisanje.blogspot.com*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

Kada ste dodali kod, sačuvajte, vratite se na kontrolnu tablu bloga i kliknite na opciju Izgled.
Kliknite na Dodaj Gadget i izaberite HTML/JavaScript
Dodajte sledeći kod

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgML2pRUktzoP0P9NDHdBpwVA9TGvN7ZdPJ1pgcq6qjZP1ANsZRiNsS5ep-C3AP-gYaFr9P2YUTB49Ojmzt7bWYYCWhQ97USfptxTZ2A1jimM-T4P-pwXdx77lO4SavDOHL-L1JH3JraTI/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_Hbqw28DwUSkx7inTT3tJUjnTmRgi6zQd2u92QDfYGDCVqdOAGYk5YMKnhYpfw5_7egw_EMZp9vA87sfkUZHrzJ6dya2bYjWEErW98-4YftQ67sVM0Tc-H-uva2PXxsDbYoO0bTz1IE/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlISQVf0XF-iWDGbbdMF3AEBVn34c9AQn4lSuFNZW9LHT83jo7uONjOFZ1Qnlox4xtbzfvNlNb40QKQdYlK1Cv1zATo4wa9E0qXj9zgpMavFd5if1Cneu2lSYUplKruLvrIsuvFRVeqU4/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoMO8OYvEQsGOxM9Q-27eV2fElrxtHACuBVCOkxTvSdpR-MITAL4cxEsPQ0uBA-NfXGWuvdw_aThBhZOgMbVYnoRXR6En6tmVEQhWh2izLKFVFy1k-vIuEjieP0XB6ANMqwgMjNJNOok/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Title 4</div>
                </li>
            </ul>
        </div>

Zamenite naslov (title) i link slike sa vašim.
Sačuvajte i to bi bilo to.

CSS meni sa 3D efektom

noreply@blogger.com (Dijeta Keto) — Sat, 23 Apr 2016 19:25:00 +0000

Danas ću vam pokazati kako da dodate još jedan vrhunski widget, css meni koji ima 3D efekte. Vrlo lako ga možete postaviti na vaš blog.

POGLEDAJTE DEMO

Idite na Blogger kontrolnu tablu > Šablon
Pronađite ]]></b:skin> kod (ctrl+f)
Sledeći kod dodajte ispod njega

<style>

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a,

#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#cssmenu:after,

#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

#cssmenu #menu-button {display: none;}

#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}

#cssmenu > ul {background: #3db2e1;}

#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}

#cssmenu.align-center > ul {font-size: 0;text-align: center;}

#cssmenu.align-center > ul > li {display: inline-block;float: none;}

#cssmenu.align-right > ul > li {float: right;}

#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;

  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;

}

#cssmenu > ul > li.active > a {color: #dff2fa;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);

  -ms-transform: none;

}

#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);

  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);

  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);

}

#cssmenu > ul > li:hover > a::before,

#cssmenu > ul > li > a:hover::before { background: #3db2e1;}

#cssmenu.small-screen {width: 100%;}

#cssmenu.small-screen > ul,

#cssmenu.small-screen.align-center > ul {

  width: 100%;

  text-align: left;

}

#cssmenu.small-screen > ul > li,

#cssmenu.small-screen.align-center {

  float: none;

  display: block;

  border-top: 1px solid rgba(100, 100, 100, 0.1);

}

#cssmenu.small-screen > ul > li:hover > a,

#cssmenu.small-screen > ul > li > a:hover {

  color: #dff2fa;

  -webkit-transform: none;

  -moz-transform: none;

  transform: none;

  -ms-transform: none;

}

#cssmenu.small-screen > ul > li > a::before {

  display: none;

}

#cssmenu.small-screen #menu-button {

  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}

#cssmenu.small-screen #menu-button:after {

  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;

}

#cssmenu.small-screen #menu-button.menu-opened:after {

  border-top: 2px solid #dff2fa;

  border-bottom: 2px solid #dff2fa;

}

#cssmenu.small-screen #menu-button:before {

  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;

  height: 2px;

  background: #ffffff;

}

#cssmenu.small-screen #menu-button.menu-opened:before {

  background: #dff2fa;

}





  </style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/>

Sada idite Izgled
Kliknite na Dodaj Gadget i izaberite HTML/JavaScript
Dodajte sledeći kod

<div id='cssmenu'>

<ul>

   <li class='active'><a href='#'>Home</a></li>

   <li><a href='#'>Products</a></li>

   <li><a href='#'>Company</a></li>

   <li><a href='#'>Contact</a></li>

</ul>

</div>

Sačuvajte i to bi bilo to.

Jos jedan profi padajuci meni za vas blog!

noreply@blogger.com (Dijeta Keto) — Thu, 31 Mar 2016 20:44:00 +0000

Padajuci meniji su veoma vazni za blogovanje i ovakve stvarcice su takodje znacajne za goste na vasem blogu jer pruzaju bolju preglednost, lakse snalazenje sto ce naterati posetioce da navrate jos koji put.

Dodajte plavi padajuci meni

Ulogujte se na Blogger > Kontrolna Tabla
Kliknite na Izgled > Dodaj Gadzet > HTML/JavaScript
Dodajte sledeci kod:

<style>
/* Blue Dropdown Menu by www.bloggerisanje.blogspot.com */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
</style>
<ul id=”nav”>
<li><a href=”#“>Home</a></li>
<li><a href=”#“>Tutorials</a>
<ul>
<li><a href=”#“>HTML / CSS</a></li>
<li><a href=”#“>JS / jQuery</a>
<ul>
<li><a href=”#“>jQuery</a></li>
<li><a href=”#“>JS</a></li>
</ul>
</li>
<li><a href=”#“>PHP</a></li>
<li><a href=”#“>MySQL</a></li>
<li><a href=”#“>XSLT</a></li>
<li><a href=”#“>Ajax</a></li>
</ul>
</li>
<li><a href=”#“>Resources</a>
<ul>
<li><a href=”#“>By category</a>
<ul>
<li><a href=”#“>PHP</a></li>
<li><a href=”#“>MySQL</a></li>
<li><a href=”#“>XSLT</a></li>
<li><a href=”#“>Ajax</a></li>
</ul>
</li>
<li><a href=”#“>By tag name</a>
<ul>
<li><a href=”#“>captcha</a></li>
<li><a href=”#“>gallery</a></li>
<li><a href=”#“>animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#“>About</a></li>
<li><a href=”http://www.bloggerisanje.blogspot.com.com”>FAQ’s</a></li>
</ul>

Sacuvajte.

Na mestima oznacenim crvenom bojom dodajete vas URL.

Mesta oznacena Belom bojom su imena menija.