Blogger Tutorial - Lenyíló menüsor létrehozása a Bloggerben

Aki Bloggert használ, az tudja, hogy a lehetőségek igen korlátoltak (bár korántsem annyira, mint pl. a Cafeblognál) a blog személyre szabásával kapcsolatban. Létre lehet hozni menüpontot az oldalak segítségével, viszont aki alkategóriákat is szeretne létrehozni, annak egy kicsit jobban bele kell ásnia magát a dolgokba :) Amikor elkezdtem blogolni, már akkor megfogalmazódott bennem, hogy milyen témákban szeretnék írni, s szerettem volna, ha szépen csoportosítani lehetett volna őket. De akkor még nagyon kezdő voltam - most sem vagyok profi -, így nem mertem nagyon belenyúlkálni. De mivel egyre csak nőtt bennem az elszántság, hogy meg kellene csinálni, kiderítettem hogy hívják az ilyen menüsort és célirányosan kezdtem el keresni. Találtam is egy szuper oldalt, ahol érthetően le van írva minden, hogy mik a lépések, és aminek köszönhetően sikerült is megcsinálnom. Később már annyira felbátorodtam, hogy már a betűtípust és a színeket is meg tudtam változtatni, valamint új kategóriákat és alkategóriákat is tudtam hozzáadni. Majd erről is írok később, de egyelőre szépen sorban, kezdjük az elején :)

Az első dolgunk az lesz, hogy egy papírra írjuk le a létrehozandó kategóriákat/menüpontokat, alkategóriákat. Muszáj, hogy már az elején tisztában legyünk ezzel, mert sokkal könnyebb dolgunk lesz a menüsor összeállításánál. 

Ha ezzel megvagyunk, akkor ellenőrizzük le, hogy a címkék közt szerepelnek-e ugyanezek az elnevezések (ugyanis ennél is nagy szerepük vannak a címkéknek, ezek segítségével tudjuk majd elhelyezni a bejegyzéseket a menüpontok alatt), pl. Otthon, Főzőcske, DIY. 

Ha nincsenek ilyenek, de vannak ezzel kapcsolatos bejegyzések, akkor címkézzük fel őket a kategória nevével. Ha ezzel megvagyunk kezdődhet a móka :)

A képek kattintásra nőnek.

CSS menü létrehozása

A böngészőbe írjuk be a www.cssmenumaker.com címet. Erre az oldalra fogunk eljutni. 

1.) Fent, a kis házikó melletti Menus fülre kattintva, a lenyíló menüből válasszuk ki a Drop Down (többféle menüsor közül választhatunk, de én most csak azt mutatom meg, ami az én blogomon van, azaz a lenyíló menüsort, a legtöbb blogger úgyis azt használja) menüpontot. 

2.) A következő ablakban sokféle típust találunk, vannak közöttük 1-, illetve 2 almenüvel rendelkező menüsorok, nekem a 2 almenüs valahogy nem akart működni, éppen ezért választottam az 1 menüs, azaz az 1 submenus lehetőséget.  A képen bekarikáztam, hogy én melyiket választottam a blogomhoz és a további útmutató is ahhoz készült :) Kattintsunk rá. Ahhoz, hogy elkezdjük szerkeszteni, kattintsunk a Build / Download gombra. 

3.) Az alábbi képen bekarikáztam a fő részeket, amik bennünket érdekelnek. Az 1-es szám maga a kategóriákat tartalmazza, egyelőre még azokkal a pontokkal, amiket a sablon megadott, de ezeken változtathatunk: átnevezhetjük, átrendezhetjük és törölhetjük őket. A 2-es szám a menüpont szerkesztését jelöli, megadhatjuk a nevét és beilleszthetjük alá azt a linket, amin keresztül megnyithatjuk majd a blogon a vele kapcsolatos bejegyzéseket. A 3-as pont az alkategóriákat jelöli, pl. az Otthon alá betehetjük a Takarítás és a Lomtalanítás menüpontot. Ezeket is lehet törölni, illetve hozzá is lehet adni, ha több alkategóriát szeretnénk létrehozni.

4.) Új kategóriát (menüpontot) hozzáadni úgy tudunk, ha a felül található részbe (1) beírjuk azt a nevet, amit a kategória nevének szánunk. A menüpontokat úgy tudjuk mozgatni (2), ha az egérrel bal gombját nyomva tartjuk rajta és ha egy picit balra húzzuk, akkor főkategória, ha jobbra húzzuk, akkor alkategória lesz belőle. Törölni pedig a kis x-re (3) kattintva tudunk. 

5.) Térjünk rá akkor a menüszerkesztésre, hiszen ez lenne a dolog lényege :) A Title-hoz írjuk be a főkategóriának, én jelen esetben a Főoldal nevet adtam neki. A Link-hez pedig illesszük be a blogunk URL-jét. 

6.) Ugyanígy kell eljárni a többi menüpontnál és almenüpontnál is. A linkeket így adhatjuk hozzá a legkönnyebben: a címkére kattintsunk a jobb egérgombbal és a Hivatkozás címének másolása opcióra kattintva helyezzük a vágólapra a linket és CTRL-V billentyűkombinációval illesszük be a Link-hez. 

7.) Ha elkészülünk a menüsor kategóriáival és alkategóriáival, akkor menjünk a Download gombra. Sajna nem tudjuk elmenteni, csak akkor, ha fizetünk érte...

8.) Egy cssmenu című rar fájlt kapunk, mindenki keresse meg ott, ahova menteni szokott a böngészője :) Csomagoljuk ki (egy őj mappát hoz létre magának, szóval választhatjuk nyugodtan a "Kicsomagolás ide" lehetőséget).

9.) Ha kicsomagoltuk, válasszuk ki a menu_source mappát és nyissuk meg. Ott nyissuk meg a Styles című jegyzetfüzetet. 

10.) Az abban talált kódot jelöljük ki és CTRL-C kombóval másoljuk ki. 

HTML kódolás

11.) Menjünk a blogunk Tervező menüjébe és FONTOS! hogy készítsünk egy biztonsági mentést (1), ugyanis ezek után a HTML kódban fogunk matatni és nem lenne jó, ha elveszítenénk a blogunkat ha valami véletlenül nem úgy sikerülne :) Ha megvan a biztonsági mentés, akkor kattintsunk a HTML kód szerkesztésre (2). 

12.) Az első feladatunk az lesz, hogy megkeressük a képen látható kódrészletet (nem kell sokat görgetni lefelé, szinte az elején van :) Ha megvan, nyissuk le a mellette található kis fekete háromszöget és görgessük le addig, míg meg nem találjuk az alsó képen bekarikázott kódrészletet. 

13.) Ha ezzel megvagyunk, a kapcsos zárójel alá üssünk egy ENTER-t. Abba a sorba kell majd bemásolni azt a kódot, amit a 10-es pontban kimásoltunk. 

14.) Ha bemásoltuk, mentsük el a sablont (1). Ezután kattintsunk be valahova a kódok közé (ne nyomjunk le semmilyen billentyűt, csak kattintsunk be az egér bal gombjával). A CTRL-G segítségével hívjuk elő a keresőt és írjuk be, hogy  </header> (2). 

15.) Ha megtaláltuk, üssünk alatta egy ENTER-t, úgy, ahogy az alsó képen látszik, 3 sor legyen a két kódsor között. Majd a középsőbe kell bemásolnunk a következő kódot. 

16.)  Menjünk vissza abba a mappába, amit letöltöttünk (css menü) és válasszuk ki a readme html fájlt. Ekkor a böngészőnkben felugrik egy új oldal/ablak és ott a 3. mezőben levő kódrészletet jelöljük ki CTRL-A kombóval (ilyenkor a mezőben található összes elemet kijelöli) és másoljuk ki. 

17.) Illesszük be a kimásolt kódot oda, ahova a 15-ös pontban mutat a nyíl. Mentsük el a sablont. És ha mindent jól csináltunk, készen vagyunk, elkészült a menüsorunk. Így kell kinéznie:

S ha pl. a Lomtalanítás menüpontra kattintok, akkor megjelenik az összes olyan bejegyzés, ami ezzel a címkével van ellátva.  

Tipp: ha nem vagyunk elég biztosak magunkban, érdemes egy próba blogot létrehozni, átimportálni a bejegyzéseket oda és először ott kipróbálni. Ha sikerül és működik, akkor lehet élesben is megcsinálni :) Én is próbablogon gyakoroltam és ezt az útmutatót is annak a segítségével állítottam össze :) 

A színek és a betűtípus megváltoztatásáról egy másik bejegyzésben írok majd, természetesen, ha igény van rá :) Ha esetleg valami nem érthető, elakad valaki, írjon nyugodtan, és megpróbálok segíteni :)