Keresés a blogban

2010. szeptember 1.

Horizontal navbar in Simple theme - Linksáv az új Simple sablonba


A Minima fejléce alá vagy fölé tehetsz egy vízszintes linksávot, amelyre linkeket rakhatsz. Erről már volt bejegyzés. Ezek a linkek bárhova mutathatnak, egy másik blogodhoz, vagy a statisztika oldalra, belépés a Bloggerbe stb. a lehetőségek száma végtelen.
Ebben a blogban is van ilyen linksáv, itt az egyes címkék vannak rálinkelve (sablon, Widget, HTML, ...).
Ez a linksáv nem azonos a vízszintes oldalnavigációval, azt ettől függetlenül működtetheted, ahol az általad létrehozott oldalakhoz (pl. statikus tartalmakhoz) vezetnek a linkek.

A Blogger azonban megújította az alapsablonjait, a Minima helyett a Simple változatait választhatjuk. Az új típusú sablon már a Sablontervezővel is szerkeszthető.
Az új sablon szerkezete és részeinek elnevezése eltér a régi Minimától, így a linksáv elhelyezésének módja annyiban változik, hogy a kódban meg kell keresnünk a helyét, hová tegyük.

Irányítópult - Tervezés - HTML-kód szerkesztése - Vezérlősablonok kibontását jelöld be
Ctrl+f
A keresőablakba írjuk be:   /* Tabs
ELÉ szúrjuk be ezt a kódot:

#linknavbar {
background: transparent;
width: 950px;
height: 30px;
color: #FFF;
margin-left: 20px;
padding: 3px;
}
#linknav {
margin: 0;
padding: 0;
}
#linknav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#linknav li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #FFF;
display: block;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#linknav li a:hover, #linknav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#linknav li:hover, #linknav li.sfhover {
position: static;
}
Most a keresőablakba írjuk be: class='main-outer'

Ezt találjuk:
<div class='main-outer'>

ELÉ szúrjuk be ezt a kódot:

<div style='clear:both;'/> 
<div id='linknavbar'> 
<ul id='linknav'> 
<li> <a href='#'>Link1</a> </li> 
<li> <a href='#'>Link2</a> </li> 
<li> <a href='#'>Link3</a> </li> 
<li> <a href='#'>Link4</a> </li> 
</ul> 
</div> 
<div style='clear:both;'/>
Sablon mentése

Most formázzuk hozzá a sávot és a linkek számát a saját sablonunkhoz:
A sablontervezőben nézzük meg a sablonunk szélességét, és az alkalmazni kívánt színek színkódjait, ezeket írjuk ki.
Nyissuk meg újra a HTML-kód szerkesztését, keressük a két beszúrt kódrészt, és módosítsuk, amit akarunk:

#linknavbar {
background: transparent;               a sáv háttér színe (most átlátszó)
width: 950px;                                a sáv szélessége
height: 30px;                                 a sáv magassága
color: #FFF;                                 alap betűszín
margin-left: 20px;                         mennyivel legyen beljebb a baloldaltól
padding: 3px;
}

#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #FFF;              a linkek betűszíne
display: block;
font-size: 12px;          a betűnagyság
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}

#linknav li a:hover, #linknav li a:active {
background: #888;        a link háttérszíne rámutatáskor, kattintáskor
color: #FFF;                 a link betűszíne rámutatáskor, kattintáskor
display: block;
text-decoration: none;   a link ne legyen aláhúzott rámutatáskor (ha igen, akkor underline)
margin: 0 5px 0 0;
padding: 6px 13px;
}

Ezután keressük meg a második beszúrt kódot.
Ezt a sort másolással annyiszor ismételjük, ahány linket szeretnénk:
<li> <a href='#'>Link1</a> </li>

Sablon mentése.

Így használjuk a linkeket:
<li> <a href='#'>Link1</a> </li>

A # helyére szúrjuk be az URL címet
A Link1 szöveg helyére írjuk azt a szót, ami kiírva látszódjon.
Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

10 megjegyzés:

Unknown írta... [Válasz erre...]

Szia, légy szí segíts, olyan nagyon sokat tanulmányozom a blogodat, ezt a navbar- t meg tudom oldani, azt viszont sehogyan nem értem, hogyan kapcsolod a címkékhez azokat a bejegyzéseidet, amelyek azzal kapcsolatosak.
Ez egy példa, a sablon címke bejegyzéseidhez, ha rákattintok, az oda tartozó bejegyzések jelennek meg, és a többi címkéhez is.
Remélem érthető voltam, hogy mit szeretnék.
Köszönöm előre is.

Unknown írta... [Válasz erre...]

Na, még egyszer, a kapcsolódó cikkek, erre vagyok kíváncsi, illetve szeretném tudni.
Köszi!

Wise Lady írta... [Válasz erre...]

@Marcsi
http://www.bloggersbloggers.com/2010/02/kapcsolodo-cikkek-related-posts.html

Unknown írta... [Válasz erre...]

@Wise Lady

Nagyon szépen köszönöm, már alakulgat, a blogod nagyon jó, amióta rátaláltam, itt tartózkodom.

Berta írta... [Válasz erre...]

Nekem ezzel függőleges lesz a linsáv, nem vízszintes. Mit csináltam rosszul?

Wise Lady írta... [Válasz erre...]

@Berta
Esetleg próbáld azt, hogy a kódban a display: block
helyett
display: inline
szerepeljen.
Bár nem tudom, mit csináltál, bővebben emailben is leírhatod a Kapcsolat oldalról. Sokaknál működik már gond nélkül.

HUMANPIAC-a munka piaca írta... [Válasz erre...]

üdv:)

lehet, elkerülte a figyelmemet-de azt hol lehet beállítani, hogy a fejléc alá vagy felé kerüljön a linsáv?

nagyon köszönöm:)

ea

Wise Lady írta... [Válasz erre...]

@-
Azt nem beállítani lehet, hanem neked kell ismerned a kódot, hogy melyik részt hogy nevezték el. És oda teszed, ahová te akarod. Mi most a main-outer fölé tettük - azaz a fejléc alá.
Ha pl. a header-inner és a title-wrapper közé teszed, akkor a fejléc tetejére, de a cím fölé kerül. Elképzelhető, hogy a plusz sáv fejlécbe tétele torzít a magasságokon, akkor azt sajnos kézi kódolással kell megváltoztatni.

HUMANPIAC-a munka piaca írta... [Válasz erre...]

:)

lenne még egy kérdésem-amatőr:)
tehát:ebben a cikkben a vizszintes linksáv elkészitését láttuk-
de mi is a vizszintes oldalnavigáció?
az, amit "oldalak" néven tudunk elkésziteni a bloggerben?
bocsi a hülye kérdésért:)

a másik kérdésem lenne:Te ebben a blogban hogy csináltad meg azt, hogy a fejléc felett is van egy sáv?
ami a fejléc alatt van, az linksávként készült el-és ami felette van?-azok esetleg oldalként?

nagyon köszönöm a választ:)

ea

"

Wise Lady írta... [Válasz erre...]

@humanpiac
Igen, az oldalnavigáció az, amit oldalak néven készítünk. Közzétételkor lehet választani, hol jelenjen meg.
A felső sor nálam kódolással keletkezett. A sablonba bele kell írni.

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-