Blog Design - Menüsor / Custom Menu Bar

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

Blog Design - Fejléc / Blog header

Jöhet a következő? :)

Akkor jöjjön a fejléc készítés. Korábban már volt róla szó, de az még a régi blogos sablon használatával valósulhatott meg.
Most következzen az újban hogyan is oldható meg.

Én Gimp-et használtam hozzá, nekem azzal volt a legegyszerűbb (de ha nincs a gépeden, akkor használhatsz bármilyen online programot hozzá pl. Pixlr).

Mindenek előtt érdemes eldöntened, hogy milyen színekben pompázik majd a blodog. (persze lehet többszínű is, ha úgy tetszik, de adott 2-3 színt is választhatsz.)
Nagyszerű segítséget nyújthat ehhez a következő blog (Design-seeds), ahol temérdek színséma közül választhatsz.
Én a Fresh Cherry-t választottam (egyenlőre :)), bár a kéket kicsit variáltam.

Új betűtípust is választottam a Gimpbe.

A Gimp esetében:

1. LÉPÉS: nyiss meg egy 1350x315 pixel méretű ablakot (persze lehet kisebb, nagyobb).
2. LÉPÉS: Adj hozzá szöveget, képet, bármit ami tetszik.
3. LÉPÉS: mentsd el png kiterjesztéssel.
4. LÉPÉS: lépj be a blogodba. Majd Elrendezés --> Fejléc modul. Amennyiben már van meglévő képed, de cserélni szeretnéd, akkor katt a Kép eltávolításra részre, majd töltsd fel az elkészült képet. Érdemes az alján előtte bejelölni, hogy Cím és leírás helyett és Méretre zsugorítás (így tuti középre ugrik a fejléced).
5. LÉPÉS: mentsd el és gyönyörködj a művedben. :)

Az én variációim:

1. Tetszett a háttér, de végül nem passzolt a többihez.

 

2. Imádnivaló rusztikus háttér, de valahogy olyan télies a színvilága.

 

 

3. És a nyertes fejléc. Letisztult, mégis vibráló. ♥

Angolul itt találsz képes segítséget a Pixlr-es fejléckészítéshez.

Blogom még fejlesztés alatt áll (amint látod), de szép lassan alakítjuk, együtt. ♥

You can find a great tutorial for making Blog header here.

Blog Design - Aláírás / Signature

Ideje megszépülni. Mármint a blognak (is). :)

Indítok egy sorozatot BLOG DESIGN címmel, melyben igyekszem megosztani az elvégzett "sminkelés" menetét, hogy mások is szépítgessenek.

SMINKELJÜNK EGYÜTT!♥

Elsőként a bejegyzések utáni ALÁÍRÁS kerül terítékre.
Ez az az elem, mely nélkülözhetetlen egy-egy post után. Ezzel válik személyessé a leírt szöveg.

Van erre egy nagyon jó online program azoknak, akik nem szeretnének sokat pepecselni vele, csak be kell írni a neved, betűtípust és méretet választani és készen is vagy. (Itt találod.)
Nincs sok állítási lehetősége és cuki kis képecskét sem adhatsz hozzá, de előnye, hogy hamar készen vagy vele. (Indulásnak tökéletes!)

Viszont aki elszántabb és szeretne igazán egyedit alkotni, annak szól a következő bejegyzésem. :)
Ígérem szuper egyszerű és követhető lesz. (Ha mégsem, írj bátran. :))

1. LÉPÉS: pixlr.com (már korábban említett, online, ingyenes, szuper képszerkesztő!). --> Pixlr Editor --> Create a new image

 

2. LÉPÉS: Állítsd be a méretet (pl. 200x80). Jelöld be a Transparentet (legyen áttetsző).

 

 

3. LÉPÉS: Megjelenik egy pici kockás ablak (ahol majd dolgozol). Bal oldali oszlopban keresd meg az A betűt (Szöveg/Text). Írd be a nevet (mely majd a bejegyzések végén szerepel), alakítsd kedved szerint (betűtípus, méret, szín).

4. LÉPÉS: Mentsd el png kiterjesztéssel! (Felső sor - File, Save)

5. LÉPÉS: Még mindig online maradva menj a Picmonkey.com-ra, ahol cuki képecskéket pakolhatsz a neved köré.
Lépések: Edit a photo (megnyitod a szerkeszteni kívánt, előbb elmentett aláírást). A felnyílt oldalsávban (bal oldal), megkeresed az Overlays ikont (jelölve), ahol kiválaszthatod a neked tetsző apróságokat (ahol koronát látsz, az fizetős, de sok ingyenes akad).

6. LÉPÉS: Ha elkészültél mentsd png kiterjesztéssel.

Most jöhet a netre való felöltés.

7. LÉPÉS: Photobucket.com (regisztrálva feltöltöd a képet, majd kimásolod a html kódot). Érdemes regisztrálni, mert a blogolás során sokszor lesz még szükség képek html-kódjára.

 

 

8. LÉPÉS: Jöhet a blog. Lépj be a blogodba!
Beállítások --> Bejegyzések és megjegyzések --> Bejegyzéssablon ablakba másold be (CTRL+V) a html-kódot és Mentsd el!

9. LÉPÉS: Készen vagy! :) (Új bejegyzés hozzáadásakor már ott díszelek majd az új aláírásod.)

Ezzel végeztünk is az első leckével. :) Jó szórakozást a csinosítgatáshoz! ♥


You can find this tutorial in English here.