#5 - Leugró menü a blogodra

Igaz még azt sem vettük át, hogy miként lehet nem leugró menüt a blogra varázsolni, de mivel nekem most éppen erre van szükségem, így a simára később fogok visszatérni. Annak elkészítése ugyanis jóval egyszerűbb, mint az alábbiakban bemutatott leugróé és sok esetben és sokaknak nincs is szüksége az alábbiakban bemutatott verzióra. De akinek igen, az most mégis velem tarthat. :)

A leugró menü 2 dologból áll. Az egyiket egészen egyszerűen csak be fogjuk illeszteni a sablonunkba, a másikra pedig egy olyan megoldást kerestem, ami esetében kivételesen nem kell a HTML kódunkban turkálnunk.


A leugró menü szerkezete

Amit a sablonba fogunk beilleszteni kód a következőképpen néz ki.

• ha egy új menüpontot szeretnénk létrehozni, akkor ezt a sort kell a később bemutatott kódba beilleszteni:       

<li class="active"><a href='#'>Menü neve</a></li>

• az almenük felépítése így néz ki:

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

• egy teljesen új menüpont almenükkel együtt pedig így:

<li><a href='#'>Menü neve</a>

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li>

Ezzel egy kicsit szórakozni kell, míg elérjük a kívánt menüfelépítést, de ha az ember már átlátja, hogy hogyan is működik, akkor viszonylag hamar dűlőre lehet vele jutni. Az alábbiakban megadok egy alapnak szánt kódot, amivel el lehet kezdeni dolgozni.

Ezzel a kóddal nincs más teendőnk, mint:

1. ebből a bejegyzésből kimásolni
2. a navigációs sávban az "Tervezés" szóra klikkelni
3. a következő oldalon baloldali sávban az "Elrendezés"-t választani
4. egy új elemet a sablonhoz hozzáfűzni, méghozzá egy "HTML/JavaScript"-et
5. a felugró ablakba pedig az alábbi kódot bemásolni:

<!-- start navmenu -->
<ul id='cssnav'><li class="active"><a href='#'>Főoldal</a></li>
<li class="sub"><a href='#'>Menü 1</a>

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>
</li><li><a href='#'>Menü 2</a><ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li><li><a href='#'>Menü 3</a>
<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul></li> <li><a href='#'>Menü 4</a>
<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul></li>
</ul>
<!-- end navmenu -->

Ezzel egyelőre megvagyunk, mentsük a sablont.

További összetevő

Most a sablonunkhoz fogunk nem a HTML kódban egy kiegészítő kódot hozzáfűzni.

1. menjünk a baloldali sávban a "Sablon"-ra
2. válasszuk a sárga gombot, nem a HTML szerkesztését
3. a megjelenő új oldalon kattintsunk a legalsó szóra



4. majd görgessünk a CSS kód beszúrásának lehetőségéhez



5. ezek után pedig a jobb oldalon megjelenő fehér sávba másoljuk be az alábbi kódot:

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;}

1. Majd alkalmazzuk a blogunkra a most eszközölt változtatásokat.

Mivel a leugró menüt ilyen módszerrel illesztettük be az oldalunkra, ezért ha ezen az oldalon maradunk, akkor a Blogger által megadott kezelőfelületen testre is szabhatjuk a színeket és a betűtípust is, teljesen beleolvasztva ezzel a leugró menü kinézetét a sablonunk eddigi dizájnjába.

Ha ezzel megvagyunk, akkor nincs más hátra, mint visszamenni a HTML/JavaScript-ünkhöz, és felépíteni a menünket.

A kettős keresztek ( # - vigyázzunk, hogy a felső vesszőket ne töröljük!!) helyére kell beírni a linkeket, melyeket nem máshogy kapunk meg, mint a "Címkéinkre" kattintva, és elnevezni a menüket és almenüket.

Egy példa nálam:

<li><a href='http://vegyesturmix.blogspot.de/search/label/mindennapok'>Mindennapok</a>

<ul>
<li><a href='http://vegyesturmix.blogspot.de/search/label/kiv%C3%A1ndorl%C3%A1s'>Kivándorlás</a></li>
<li><a href='http://vegyesturmix.blogspot.de/search/label/munka'>Munka</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li>

Sok sikert a menüépítéshez! :)

Tovább olvasom »

#4 - Automatikus "Tovább olvas" gomb a blogodra

Ez a következő dolog, amit az elsők között be szoktam állítani a blogomon. Nem szeretem, ha az oldal csak amiatt kilométer hosszú, mert a bejegyzések úgy következnek egymás után, hogy a következő bejegyzés címét csak akkor találom meg, ha az előtte levőt a végéig pörgetem. Nem feltétlenül érdekel egy adott bejegyzés mindenkit és hosszan pörgetgetni az oldalt sem feltétlenül kellemes. Így aztán hagyni szoktam, hogy a bejegyzésből csak a cím és egy bizonyos mennyiségű szöveg legyen első látásra elérhető, aztán akit érdekel a teljes bejegyzés, továbbolvashatja, ha rákkattint erre a lehetőségre. De hogyan is kell ezt beállítani?

Tovább olvasom »

#3 - Blogod mentése, mielőtt bármit is alakítanál rajta

Talán ezzel kellett volna másodszorra jönnöm, hogy mielőtt beleturkálunk blogunk kinézetébe, tanácsos először az eredeti, illetőleg a már sikerrel összeállított felállást menteni, hogy ha valami mégis balul sülne el, akkor vissza tudjuk állítani az eddigi állapotot. De azt hiszem az előzőekben leírt Atom feed link törlése még nem tartozik a veszélyesebb akciók közé. :)

Tehát fontos, hogy akinek nincs gyakorlata a blog sablonjának kódjában való turkálásban, az egy esetleges alakítási kísérlet előtt mentse a fennálló állapotot. Ennek pedig a bombabiztos módja a következő.

1. Klikkelj a navigációs sávban az "Tervezés" szóra.
2. A következő oldalon baloldali sávban a "Beállítások"-ra.
3. Majd a továbbiakban lenyíló menüben legalul az "Egyebek"-re.
4. Ekkor legfelül fogod megtalálni a "Blog exportálása" lehetőséget:

5. Erre rá kell kattintani és egy általad megadott helyre menteni a kereső által majd letöltött fájlt.
6. Ezek után menj a "Sablon"-ra.
7. Nyisd meg a "HTML-kód szerkesztését".
8. Kattint a kód mezejébe (fontos, hogy oda!)
9. Nyomj egy "Ctrl + A"-t.
10. Nyomj egy "Ctrl + C"-t.
11. Nyiss meg egy Wordot, vagy bármi más programot, amibe írni lehet.
12. A programban nyomj egy "CTRL + V"-t.
13. Mentsd a program munkalapját egy, a számítógépen általad kiválasztott helyre.

És még mindig nem vagy kész!!

Ugyanis ha a blogod oldalsávjaiban dolgok vannak, mint bloglista, általad a blogra feltett idézetek, bármi, ami nem automatikusan működik (mint a diashow), akkor ezeket külön ki kell mentened, ugyanis ez mind el fog veszni egy esetlegesen balul elsült akció után, hiába is állítjuk vissza a blog eredeti kinézetét. Tehát:

1. Menj be az "Elrendezés"-be.
2. És menj szépen sorba. Amit nem kell lementeni az az Archívum, a Címkék, a Diashow, a Népszerű bejegyzések például, amit igen:
1. Általad hozzáadott linkek.
2. A Bloglistád linkjei.
3. Bármilyen szöveg, amit te írtál be.
4. Bármilyen itt hozzáadott HTML kód.
5. Stb.
3. Menj végig az egyes elemeken és nézd meg, hogy mi az, amit te tudsz alakítani, átírni, linket hozzáadni és mi az, amit a Blogger maga felkínál. 
4. Nyiss meg ismét egy Word-öt vagy bármi más programot, ahova írni lehet és egyesével, a már ismert "CTRL + C" "CTRL + V" billentyűkombinációval ments ki ide mindent.
5. Majd mentsd el a program munkalapját egy, a számítógépen általad kiválasztott helyre. 

Készen vagy! :)

Most a blogod tuti biztosan el van mentve minden porcikájában, úgyhogy akár még véletlenül törölheted is az egész eddigi munkádat a bloggeren, akkor is megvan minden, ráadásul úgy, hogy az eredeti állapotra vissza tudd állítani. Most már nekikezdhetsz a HTML kód alakításához. :)

A blogod visszaállítása esetleges hiba esetén

Nagyon egyszerű a dolgod, az egész eddig leírt akciót csak visszafelé meg kell ismételni. Tehát:

1. Ahol a blogodat exportálni tudtad, ott importálni is tudod, csak rá kell mutatni az elmentett fájlra a felugró ablakban.
2. Ahonnan a HTML kódodat a Wordbe vagy egyébbe kimésoltad, oda a Wordből vagy egyébből vissza is tudod másolnia kódot.
3. Illetve a kimentett linkeket és szövegeket az oldalsávból is vissza tudod az "Elrendezés" alatt állítani, a megfelelő widgetek alatt.

Ennyi. Csak elsőre tűnhet bonyolultnak, de alapjában véve hamar megvan az egész. :)

Tovább olvasom »

#2 - Atom feedlink eltűntetése a blogról

Amikor elkészítek egy blogot, az első dolgom mindig az, hogy a blog alján a következő feed linket eltűntetem:

Valószínűleg ez sokakat nem zavar, sokak talán észre sem vették eddig még, hogy ott van, de én nem ezek közé tartozom és nem is szeretem, ha ott van. Ez lehet csak az én bogaram, de ha már így van, tudom is hogyan tűntessem el onnan. 

Ez pedig a következőképpen megy:

1. Klikkelj a navigációs sávban az "Tervezés" szóra.
2. A következő oldalon baloldali sávban a "Sablon"-ra.
3. Majd a "HTML kód szerkesztését" kell választani.
4. A következő oldalon a kép szerint Ctrl + F -et nyomni és az alábbi kódot bemásolni a keresősávba, majd törölni a HTML kódból.

<b:include data='feedLinks' name='feedLinksBody'/>

Ha mentettük a sablonunkat, készen is vagyunk. Az Atom feed eltűnt. :)

Tovább olvasom »

#1 - A blog kezelőfelületének felépítése

Ahhoz, hogy elkezdhessem a blogger tippeket írogatni, amiknek segítségével egy kicsit a magunk tetszésére szabhatjuk blogunkat, először meg kell ismernünk, hogy ami mögötte fut, az hogy néz ki, hogyan épül fel. Kész kódokkal fogok dolgozni, nem tudok újakat írni és sok esetben történt meg már velem is, hogy egyes dolgok nem működtek a blogomon, ilyenkor más megoldásokhoz folyamodtam. Úgyhogy akinek nem működne valami, annak másik megoldás keresésében tudok segíteni, sajnos másban nem. De az általam közzétett kódok mindegyike biztosan működni fog a blogger egy felkínált sablonját választva alapul.

Nya. Tehát hogy épül fel a blogunk. Először is a blog kezdőoldalán, ha be van kapcsolva a navigációs sávunk, akkor máris láthatjuk a lehetőséget új bejegyzés írására, illetve a második link alatt rögtön a kezelőfelületre ugorhatunk.

Ha erre rákattintunk, akkor ezen az oldalon találjuk magunkat:

Itt a baloldali sávban szépen kilistázza a blog, hogy mit is bocsát a rendelkezésünkre. Amelyik link sárgán világít, az éppen az aktív.

Sorban minden egyes linkről pár szót:

• Új bejegyzés: egészen egyértelmű mire való, többet nem is kell erről mondani.

• Áttekintés: Itt tényleg áttekintésesk találhatóak, mint például hogy hányan nézték meg az oldalt, vagy hogy hány bejegyzést írtunk már, hány kommentünk van, blogger hírek, stb. Szerintem nem annyira érdekes eleinte, lehet később az lesz.

• Bejegyzések: itt láthatjuk mennyi bejegyzést írtunk eddig összesen, ebből mennyit osztottunk meg és hány piszkozat még.

• Oldalak: Ezt a fület használhatjuk abban az esetben, ha a blogon statikus oldalakat akarunk létrehozni, azaz olyanokat, amiben leírhatjuk, hogy mi kik vagyunk, miről szól a blog és miért írjuk, ilyesmik. Ezek aztán megjeleníthetőek a blogon, mondjuk a felső sávban mint nálam a "főoldal", "mindennapok" "terhesség" stb. szavak, rákkattintva pedig nem a bejegyzésekhez jutunk, hanem egy statikus oldalra, ami külön jelenítődik meg, nem pedig valahol februárban írtuk a bejegyzések között. De ennek a témának egy külön bejegyzést kell szánni, úgyhogy most erről egyelőre ennyit csak.

• Megjegyzések: itt a blogunk kommentjeit tudjuk kezelni, mint például törölni valamit, ha nem találjuk megfelelőnek a tartalmát, vagy csak megnézni, hogy egyáltalán hány komment érkezett már blogunkra.

• Google+: itt tudjuk blogunkat a Google+ közösségi oldallal összekapcsolni, vagy leválasztani arról. Megadhatjuk, hogy a bejegyzéseink automatikusan közzé legyenek-e téve a közösségi oldalon is, vagy ne.

• Statisztika: itt különféle statisztikákat láthatunk blogunkról. Mint például hogy hányan nézték meg az oldalunkat, honnan a világból, melyik bejegyzésünk volt a legközkedveltebb és a többi. Végig lehet kattintgatni, bár el kell mondjam, hogy ha az adott országból van a legtöbb oldalmegjelenítés, tehát ahonnan a blogot írjuk, akkor az legvalószínűbben csak azt mutatja, hogy mi nyitogatjuk meg napjában vagy heti többször a saját blogunkat. Ebből a szempontból pedig nekem ez a statisztika nem kielégítő, de érdekességnek érdekesség.

• Bevételek: ezzel a témakörrel még én sem nagyon foglalkoztam, mivel még egyetlen blogom sem jutott el arra a szintre, hogy attal pénzt kereshettem volna. Ez a fül ugyanis erre való, a hirdetést lehet beállítani rajta. Ez egy ideig azt hiszem senkinek nem lesz nagyon fontos fül.

• Kampányok: mint ahogy azt a fül neve is elárulja, itt tudjuk végigcsinálni azokat a lépéseket, melyek segítségével blogunknak nagyobb csinnadrattát kölcsönözhetünk. Természetesen ez a fül nem ingyenes szolgáltatás, úgyhogy ha nem olyan tartalmunk, és/vagy még nagyon kevés, nem érdemes ezzel foglalkozni, mert nem pénzt hozunk a házhoz, hanem inkább csak pénzt viszünk el.

• Elrendezés: végre egy, a kezdetekben is nagyon érdekes fülhöz jutottunk, hiszen itt tudjuk mindenféle programozási tudás nélkül, a blogger alapkínálatának segítségével blogunk felépítését létrehozni. Az egyes elemeket huzogatással tudjuk elrendezni, helyüket változtatni, és ha eddig hiányzott volna a navigációs sávunk a blogról, azt is itt adhatjuk hozzá (ha nem működik, akkor a sablon nem blogger alapsablon). Illetve itt változtathatunk Favicont is, azaz adhatjuk meg, hogy a blogunk milyen ikont használjon a nem túl dekoratív sárga B betű helyett a lapfülön.

• Sablon: ez a második nagyon érdekes fülünk abban az esetben, ha blogunk kinézetén változtatni akarunk. Itt az első, sárgával jelölt variációhoz nem szükséges semmiféle programozási tudás, hiszen ha alap blogger sablonunk van, akkor magától fel fogja kínálni a blog a különböző elemek színének, betűtípusának, betűnagyságának és egyáltalán az oldal kinézetének, szélességének megváltoztatási lehetőségét. Ha valami kész sablonnal dolgozunk, akkor a gombra kattintva nem biztos, hogy egyáltalán valamit is találunk az újonnan megjelő oldalon, amit meg tudnánk változtatni. A HTML-es lehetőségre kattintva sem kell tudnunk feltétlenül programozni, de nem árt, ha nagyon picit kiismerjük magunkat a programozási nyelvben.

• Beállítások: az utolsó fülünk, ami alatt több további fülecske is található. Itt állíthatunk be olyasmiket, mint időzóna, blogcímet és a hozzá tartozó bloglinket változtathatjuk meg, valamint a blog nyelvét, a kommentelési szabadságot, a blog nyilvánosságát és a többit állíthatunk itt be. Érdemes ezzekkel a dolgokkal már eleinte foglalkoznunk, mert később egy blogcím vagy nem átgondolt bloglink megváltoztatása olvasók elvesztéséhez vezethet.

A továbbiakban, a blogger tippekkel elvégezhető műveletekhez az "Elrendezés" vagy a "Sablon" füleket fogjuk használni. Ha eljutok odáig, időnként a többi fülről - amiről persze érdemes - is fogok némi bővebb ismeretanyagot írni.

Tovább olvasom »