Blogkészítési Tippek X. - Kenyérmorzsa

Ha valakinek igazán régi és sok anyagot tartalmazó blogja van már fontos, hogy a látogatóit segítse a tájékozódásban. Erre való az úgynevezett Kenyérmorzsa. Amikor különböző témákban több cikket is írunk de a cikkek összefüggenek és egy-egy olvasó akár órákat is eltölt a böngészésükkel jó ha tudja, hogy épp merre jár a blogodon.

Ez az a kis szürke négyzet sötét kerettel a cikkeim felett. Mutatja, hogy honnan indultál ki és hogy éppen melyik cikket olvasod. Az igazán "mély" blogoknál ez nagyon jó szolgálatot tehet az olvasónak. Arról nem is beszélve, hogy a Google apró robotjai amelyek feltérképezik és rangsorolják blogunkat szintén szeretik. Ebben a cikkben megmutatom, hogy hogyan tudjátok elhelyezni a blogotokon ezt a dolgot és, hogy miként tudtok változtatni a méretén, színén stb.

Mint minden, ez sem annyira bonyolult dolog mint amilyennek kinéz.

1.) Menj a blogod Sablon > HTML kód szerkesztése menüpontra és a html kódban keress rá Ctrl+F billentyűkombinációval a következő sorra:

<b:include data='top' name='status-message'/>

2.) Az előbb megkeresett kódsor alá rakd be a következő sort:

<b:include data='posts' name='breadcrumb'/> 

3.) Most keress rá erre a kódsorra:

<b:includable id='main' var='top'>

4.) Ebben a lépésben helyezzük el a Kenyérmorzsa modult a html kódban. Ehhez azt kell tenned, hogy közvetlenül az imént megkeresett kódsor fölé elhelyezett ezt a hosszú kódot:

 <b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- nincs kenyérmorzsa a főoldalon -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- kenyérmorzsa a posztok oldalára -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Kezdőlap</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- kenyérmorzsa az archivált cikkek és a keresési találatok oldalára.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Kezdőlap</a> » Archiválva <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Kezdőlap</a> » Minden poszt
<b:else/>
<a expr:href='data:blog.homepageUrl'>Kezdőlap</a> » Posztok ebben a kategóriában <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

A magyar szövegeket nyugodtan írd át tetszésed szerint. Ebben a formációban a Kenyérmorzsa mindenhol meg fog jelenni, kivéve a főoldalon és ez így tökéletes is. Azt mindenki tudja, hogy a főoldalon van, nem? :D

Ha beraktad a kódot a helyére és mindent átírtál amit szerettél volna, nyomj a "Mentés" gombra. Majd menj ismét a "Sablon" menüpontra, de most a "Személyre szabás" opciót válaszd. Ezen belül pedig a "Speciális" lehetőségre kell, hogy kattints. Ekkor egy üres placcot látsz magad előtt. (Kivéve ha már raktál ide valamit korábban). Ide kell beraknod a Kenyérmorzsa CSS kódját, vagyis a dizájnt.

A következő a kódja:

.breadcrumbs {

padding:5px 5px 5px 5px;

margin: 0px 20px 0px 20px;

font-size:95%;

color: #000000 !important;

line-height: 1.4em;

border:3px groove #315F8C;

background: #e9e9e9;

text-decoration: none !important;

link-decoration: none !important;

}

Ha ezt a kódot rakod be, akkor a Te kenyérmorzsád is olyan lesz mint az enyém. Máris mondom, hogy mit, hogy tudsz megváltoztatni.
padding: ez a  szöveg és a keret között távolságot állítja, pixelekben mérve. 4 darab van belőle, a sorrend balról jobbra haladva Fent-Jobbra-Lent-Balra.
margin: ez a teljes modul távolságát mutatja a blog oldalaitól, a cikktől és a menütől vagy fejléctől. Szintén pixelekben értendőek a számok és a sorrend ugyanaz. Fontos, hogy írd mögéjük a "px" szócskát.
font-size: ez a betűméret.
color: ez a betű színe, az important mögött maradjon ott, így tutira az általad beállított színben fog pompázni.
line-height: ez a magasság, érdemes kipróbálni, hogy mit csinál, én nem nyúltam hozzá
border: ez a keret szélessége, szintén pixelekben értendő, illetve mögé rakhatsz tulajdonságot valamint színkódot is. a színkód elejéről ne felejtsd le a kettős keresztet!!!
background: ez a háttere a modulnak. szintén csak egy színkódot kell megadnod.

Az alsó két sor a szöveg és link dekorációt jelzi. Úgy van beállítva, hogy ne legyen rajtuk semmi extra. Ezalatt azt kell értened, hogy ne legyenek aláhúzottak, hiszen amikor a sablont csináltad nagy valószínűséggel úgy hagytad. Ha azt akarod, hogy mégis úgy legyen, egyszerűen csak töröld ki ezt a sort.

Ha kész vagy kattints a jobb felső sarokban az "Alkalmazás a Blogon" elnevezésű gombra és már kész is vagy. Ezek után katt a "Vissza a bloggerbe" feliratra és nézd meg az egyik cikkedet.

FONTOS Tipp!!!!

A modul úgy működik, hogy amikor a bejegyzés megírásánál megadod a címkéket, ez a legutolsót fogja érzékelni. Az lesz a "kategória" majd pedig következik a cikk címe.

Vagyis ennél a cikknél beraktam kb 6 címkét, az utolsó közülük a "Blogkészítési Tippek" mivel ez annak a témának a része majd utána a cikk címe látható. Erre érdemes nagyon odafigyelni. Egyébként a címkék fontosak a keresőoptimalizálás szempontjából, de az utolsóra figyeljetek oda!!