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!)

12 megjegyzés:

Timi írta...

Ez így nagyon egyszerűnek tűnik. Napokon belül én is kipróbálom. Köszönöm szépen, hogy leírtad.
A Te oldalad is nagyon klassz lett:-)))

Maja írta...

De jó ez a részletsség! Már alig várom, hogy időm legyen kipróbálni! Köszi!

Izzie írta...

Köszi a bejegyzést!
Végre el tudtam távolítani a kereteket.

Kata írta...

Köszönet ezért a szuper, alapos leírásért! A Te blogruhád nagyon tetszik! :)

nelson írta...

Very nice - easy to follow, simple, and working. Thanks for the knowledge!
More templates easy to download

beautiful.lie írta...

De jó, hogy rátaláltam erre a pofon egyszerű, és részletes leírásra.., nagyon köszönöm!

Pertine írta...

Köszönet a leírásért, Te vezetted a kezem a hátterem blogra varázsolásakor :)

Juma írta...

Igazán köszönöm, sokat segítettetek a jó ötletekkel és a tökéletesen következő leírással:-)))) Szerintem előbb-utóbb sokan új blogrucival tündöklünk:-))

jociandi írta...

Nagyon szívesen, ezért van. :) Bár ha jól látom, meg kellene frissíteni, mert a blogspot kicsit változtatott sablonügyileg.

TkT írta...

Az új blogspot sablonokra képtelen vagyok alkalmazni a leírtakat... :( Tudom, hogy pofátlan kérdés, de várható egy frissített tutorial? Lécciléccilécci!! :)

jociandi írta...

Nem ígérem, hogy rögtön, de megnézem, mit tehetek. Vannak az újnak előnyei, de sajnos hátrányai is.

TkT írta...

Előre is köszi!!