Egy nagyobb lélegzetvételű dolog következik. Hosszadalmasnak tűnik, de nem az! ♥
Nem tudok jó megfogalmazást rá, de most arra mutatok egy módszert, hogyan is lehet menüsort létrehozni a fejléc alatt. Olyat, ami díszes, kattintható és egyedi. :)
Sminkelésre fel!
1. LÉPÉS: Megint csak a Gimp (vagy egyéb online képszerkesztő - pl.
Pixlr) segítségével készítünk mini ikonokat a csini menüsorunkhoz.
Figyelembe kell venni, hogy hány ilyen cimkéd lesz és aszerint felosztani a méretet.
Én 7 cimkét készítettem, így 160x60-as méretű képecskéket szerkesztettem (a fejléc méretéhez viszonyíts!, ne legyen az össz képeid mérete hosszabb annál. Magasság változhat, lehet kisebb, nagyobb.)
Ha nem szeretnél színes hátteret az egyes ikonokhoz, akkor érdemes áttetszőként menteni (vagyis tedd láthatatlanná a hátteret mentés előtt).
Ha készen vagy mentsd el
png kiterjesztéssel.
Ugyanez Pixlr segítségével:
Pixlr.com --> Pixlr Editor --> Create a new image
Szélesség (width) legyen pl 160, magasság (height) lehet 40 vagy 80 (vagy nagyobb, nekem 60-at nem enged).
Pipáld ki a Transparent feliratot (hogy áttetsző legyen a háttér). Ha nem szeretnél áttetszőt, hanem színes kis ikonokat, akkor ne jelöld ki, hanem majd a szerkesztésnél válassz háttérszínt).
Az A jelű kis ikonnal írhatsz. A szövegedet a Font (betűtípus), Size (méret), Style (típus - félkövér, kövér, dőlt vagy mind), Color (szín) szerint igazíthatod.
Ha szeretnél még díszt is hozzáadni a felirathoz, akkor kattints újból az A jelű ikonra, majd a "pepita" dobozba valahol az egyik sarokba (fontos, hogy ne érjen egymáshoz a két szövegdoboz az elsővel, mert akkor az előzőt szerkeszti!).
Nagyon szép mintákat érhetsz el a Bergamot Ornaments betűtípus kiválasztásával. (én az l betűt írtam be a cirádához)
Ezt is méretezheted, igazíthatod, szinezheted.
Legvégül mentsd el a kis képecskédet (File --> Save). Írd be a nevét és mentsd mint png.
Saját számítógépedre mented, így válaszd ki melyik mappába, hogy később megtalád. :)
2. LÉPÉS: az elkészült képeket töltsd fel egy online képfeltöltőre (javaslatom a már korábban is említett
photobucket, ahonnan leolvasható a képek html-kódja).
Photobucket.com --> Jelentkezz be (ha még nem regisztráltál regisztrált, ingyenes!) --> Upload --> Browse Files (keresd meg a gépeden a mappát ahova mentetted és nyisd meg a képet)
Feltöltés után a sötét téglalap alatt találod a felöltött képet.
A képre kattintva új lapon láthatod magát a képet nagyban és a jobb oldali oszlopban a linkeket. (nekünk most csak a Html code kell). Rákattintva a html code sorára már ki is másolta.
3. LÉPÉS: lépj be a blogodba.
Sablon --> Html-kód szerkesztése (Jelöld be a Vezérlősablonok kibontása négyzetet.)
Ctrl+F-el megnyílik felül egy keresősáv. Oda írd be a következőt:
showaddelement.
Nálam 8 találatot adott ki rá. Kattints a következőre addig, míg a sorban nem látod a
header kifejezést.
Ezt a sort keresd:
Írd át a
számot annyira, ahány ikonod lesz a menüsorban és a no-t
yes-re javítsd.
Mentsd el.
4. LÉPÉS:
Elrendezés --> Modul hozzáadása (fejléc alatt!) --> Html/Java script
(Mivel üresen nem mentheted el és még ekkor én nem tudtam megoldani, hogy gyorsan másoljak is, így tettem egy x-et a leírás részébe, és így mentettem.)
Majd a már hozzáadott Html/Java script sorban a szerkesztére kattitva jobb gombbal megnyitjuk új ablakban. (ez csak akkor szükséges, ha mindent új lapon akar megnyitni, mint az én böngészőm. :))
5. LÉPÉS: menj vissza a képfeltöltőbe és másold ki egyesével a kódokat (csak rá kell kattintani a hmtl sorra és már ki is másolta).
Majd kattints vissza a megnyitott előző Html/Java ablakra és másold be a kódot.
(Ezt addig csináld - a másolást, amíg nem végzel az összes feltöltött képecskével.)
A kódok között érdemes 1-1 sort kihagyni, hogy átláthatóbb legyen.
A legelső sor elé és a legutolsó sor után másold be ezt a két kódot:
Ezzel bepozícionálja középre a menüsorodat.
(A címsort hagyd üresen!)
(Még ne mentsd el, hagyd nyitva az ablakot!)
6. LÉPÉS: nyisd meg egy új lapon a blogod.
Kattints egyesével azon címszavakra amiket a menüsorban szeretnél látni (tartalmilag!).
(A Home-hoz a blogod webcíme kell, a többihez pedig amit majd kimásolsz.)
A böngésződ címsorából másold ki az így megjelenő http-címet.
EDDIGIEK:
7. LÉPÉS: Kattins az előző Html/Java ablakra.
(6 és 7 LÉPÉSEK-et addig csináld, amíg nincs több képecskéd!)
A szövegdoboz jobb sarkában levő
Rich text feliratra klikkelj. Ezzel átvált képecskékre.
Jelöld ki az egyes képecskéket, majd kattints a link ikonra (egy kis láncszem a Rich text bal oldalán).
A kimásolt http-címet másold a megjelenő ablak címsorába.
OK.
8. LÉPÉS: Mentsd el és élvezd a munkád gyümölcsét! :)
Amennyiben valami nem volt érthető írj és javítom! :)
English tutorial, about how to add a Custom Menu Bar for your Blogger visit this site. ♥
