A következő címkéjű bejegyzések mutatása: tutorial. Összes bejegyzés megjelenítése
A következő címkéjű bejegyzések mutatása: tutorial. Összes bejegyzés megjelenítése

2011. december 12., hétfő

Blogspot - a zanyád!

Az a meglepetés ért ma, hogy a Blogspot elrontotta a hátteremet, összement teljesen, de sikerült megoldani a problémát.

Ha velem együtt csináltad a blogod megjelenését (lásd itt), akkor annyi teendőd van, hogy belépsz a picasaba, a képedre jobb gomb, kép címének másolása, majd belépsz abba az oldalelembe, ahol létrehoztad a html utalást, és csak átírod a kép méretét.

Tehát ilyen legyen a mindig szórakozó képlinked:
"https://lh5.googleusercontent.com/xxxxx/xxxxx/xxxxx/xxxxx/s1280/xxxxxxx.jpg"

Csak azt a s-akárhány számod írd át az eredeti képed szélességére, nálam ez 1280 képpont.

Szeretem a blogspotot, de azért néha olyan zizik...

2009. június 25., csütörtök

Frissítve a blog dizájnolós tutorial!

Köszönöm szépen a visszajelzéseket a blog tutoriallal kapcsolatban, örülök, hogy vannak sikerélmények!

Némi pontosítást írtam még bele, dőlt betűkkel lehet olvasni ezeket az eredeti bejegyzésben, azaz itt, a tutorialban.

2009. június 13., szombat

Blog template csere - tutorial

krisssz-szel kifundáltuk a blog template-csere legegyszerűbb módját. A legnagyobb varázslatra ő jött rá.

Van egy borzasztó egyszerű módja annak, hogyan szabjuk egyedibbé a blogspotos blogjaink kinézetét. A teljesen kezdők is megpróbálkozhatnak vele, nem egy nagy ördöngösség.

1. Első lépésként készítsük el a hátterünket. Ehhez kreáljunk egy 1280x1024-es, 72 dpi felbontású háttérképet. Arra figyeljünk, hogy világosabb háttér legyen. Mentsük el jpg-ben.

(Kis netes "okoskodás": világos háttéren a sötét betűk fárasztják legkevésbé a szemet, fordítva már nehezebb olvasni, valamint kerüljük az olyan, szemjojózást kiváltó színkombinációkat, mint pl. fehér alapon rózsaszín betű vagy sárga alapon piros. A legborzasztóbb, amivel eddig találkoztam a kék alapon piros betű párosítás volt - ezt az élményt nem kívánom senkinek.)

Ha kíváncsiak vagyunk mások teljes háttérképére (előfordulhat, hogy nem látjuk az egészet), akkor álljunk a háttér egy olyan pontjára, amin nincs szöveg vagy link, nyomjunk jobb egérgombot, majd kattintsunk a "háttérkép megjelenítése" lehetőségre. Így megjelenik csak a háttér, innen le is menthető, de ugye egyikőnk sem használ fel olyat, ami a másé?!

Mikor hátteret készítünk, gondoljunk arra, hogy mindenki más és más monitorbeállításokkal rendelkezik. Van, akinek pl. 1024x768 a megfelelő, másnál 1900x1200 lehet. Ha azt szeretnénk, hogy nagyjából hasonlóan lássák a hátterünket, a díszítőelemeket ne alulra rakjuk, hanem oldalra, így látható lesz a kisebb felbontással rendelkezőknél is. Előfordulhat, hogy próbálgatnunk kell, így mindig őrizzük meg a psd fájlt is az esetleges módosításokhoz.

2. Készítsük el a fejlécet. Itt 640x200-as, szintén 72 dpi-s módban alkossunk valami szépet, mentsük el png-ben.

3. Egy nyilvános netes mappába mentsük el a hátteret. Mivel a blogspot szorosan együtt van a picasaval, érdemes itt elhelyeznünk.

4. Most következik az, amitől eddig féltünk, de nem kell. Lépjünk be a blogspot Elrendezés szerkesztése -> HTML-kód szerkesztése menünkbe.



Mielőtt elkezdünk alakítgatni, lementjük a jelen állapot beállításait biztos, ami biztos alapon.



5. Lépjünk át az Új sablon választása menübe, majd válasszuk ki vagy a sima Minimát, vagy az én kedvencemet a Minima Lefty-t (én ezzel mutatom tovább), majd kattintsunk a Sablon mentése gombra.



6. Lépjünk át az Elrendezés -> Oldalelemek menübe, majd kattintsunk a Modul hozzáadása linkre.



7. Adjunk hozzá egy HTML/JavaScript modult.



Most jön a krisssz-féle varázslat, amit talált neten:

Másoljuk be a mezőbe ezt a szöveget:



Majd "http://xxxxxxx.jpg" helyre illesszük be a saját, már picasán közzétett képünk címét. Ezt úgy tehetjük meg, hogy a picasan belül megkeressük a képet, megnyitjuk nagyban, ráállunk, jobb egérgomb -> kép címének másolása és itt beillesztjük. A HTML/Javascript modult elmentjük.

Figyelem! A kép címét másoljuk, ne a böngészőjét! Ezt onnan tudhatjuk meg legkönnyebben, hogy a link végén .jpg áll, nem egyéb! Mindig nyissuk meg nagyban a képet, és ennek a nagyított változatnak a címét másoljuk a fent részletezett módszerrel.



8. Jön a fejléc. Ez a legegyszerűbb. Az oldalelemeknél kattintsunk a fejléc szerkesztésére.



Tallózzuk ki a gépünkről a már korábban elkészített fejlécet és az Elhelyezésen belül válasszuk a "cím és leírás helyett" opciót.

9. Elviekben készen is vagyunk, ezt a Blog megtekintésével le is ellenőrizhetjük. Viszont azt látjuk, hogy a képeink körül keretek vannak. Akinek ez nem tetszik, folytassa tovább az átalákítást.

A HTML-kódba kell benyúlni. Tudni kell erről, hogy tagoltan, logikusan kezeli az elemeket. Besárgítottam azokat a szakaszokat, ahol a számokat egyszerűen le kell venni nullára, így megszűnnek a keretek.

A Header szakasz alatt:



lejjebb görgetve, a comments-ek fölött még:



Be kell még állítanun, hogy a fejlécünk középre kerüljön.

A Header szakaszon belül írjuk át a kisárgított szakaszt az alábbira:



Mentsük el a sablonunkat.

Ezek után már csak a színbeállítást kell már nem HTML-szerkesztéssel, hanem a blog kezelőfelületén beállítani. Ehhez lépjünk át a Színek és betűtípusok fülre, és játsszunk kedvünkre.



A post elkészítéséhez hálás köszönet Adrinak!

(az első megjelenés óta történt változásokat dőlt betűkkel olvashatjátok!)