Keresés a blogban

2010. március 15.

Vizszintes navigáció Minima sablonhoz - Horizontal linkbar


A Minima fejléce alá vagy fölé tehetsz egy vízszintes sávot, amelyre linkeket rakhatsz. 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.
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 linkek.
Ezen a tesztoldalon láthatod működés közben mindkettőt, itt pedig élesben is megnézheted a linksávot, a fejléc alá vannak elhelyezve, felül a linksáv, alatta az oldalak navigációs sávja.
Ebben a blogban is van ilyen sáv, itt az egyes címkék vannak rálinkelve (sablon, Widget, HTML, ...).
Ez a sáv nemcsak Minima sablonba illeszthető, hanem más sablonokba is beleteheted.

Irányítópult - Elrendezés - HTML-kód szerkesztése - Vezérlősablonok kibontását NE jelöld be

Szúrjuk be a kódot oda, ahol az utolsó #header ...  részt találjuk. Pl. ha ez az utolsó, akkor ez után:
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Ide szúrjuk be a következő kódot.

#linknavbar {
background: #666;
width: 900px;
height: 30px;
color: #FFF;
margin: 0;
padding: 0;
}
#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 keressük meg lejjebb ezt a részt:
<div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Anya főztje tartalom (fejléc)' type='Header'/>
</b:section>
    </div>
 
         Ide szúrjuk be a kódot

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='menű' type='PageList'/>
</b:section>
      </div>

Ezt kell beszúrni:
<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;'/>

MENTSÜK a változtatásokat! Így fog kinézni:

<div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Anya főztje tartalom (fejléc)' type='Header'/>
</b:section>
    </div>
 
<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;'/>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='menű' type='PageList'/>
</b:section>
      </div>


A linksáv  használata:

A # kereszt helyére jön a hivatkozott URL cím, a Link1 szöveg helyére pedig az a szöveg, amit akarunk, hogy kiírva legyen. Pl.:
<a href='http://bloggerbloggerek.blogspot.com'>Blogger help</a>

Ebben a kódban 4 link van, de többet is (kevesebbet is) tehetünk. Ehhez csak annyit kell tennünk, hogy annyiszor ismételjük ezt a részt (vagy kitöröljük)
<li>
   <a href='#'>Link1</a>
</li>

ahány linket szeretnénk.

A kód formázása:
Igazítsuk a linksávot a saját sablonunkhoz. Ehhez 4 fontos dolgot kell beállítanunk.
  1. A linksáv szélessége
  2. Sáv alap háttérszíne
  3. Háttérszín és betűszín az egér rámutatásakor illetve kattintáskor
  4. A link betűszíne
#linknavbar {
background: #666;   Ez a linksáv háttérszín kódja
width: 900px;           Ez a linksáv szélessége
height: 30px;
color: #FFF;             Ez a linkek alapbetűszíne (ezt nem muszáj módosítanod)
margin: 0;
padding: 0;
}

#linknav li a:hover, #linknav li a:active {
background: #888;   Ez a háttérszín rámutatáskor
color: #FFF;            Ez a betűszín rámutatáskor
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}

#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #FFFA link alap betűszíne már kilinkelt állapotban
display: block;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
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

39 megjegyzés:

Juci írta... [Válasz erre...]
Ezt a megjegyzést eltávolította a szerző.
Juci írta... [Válasz erre...]

Hali!

"#linknavbar {
background: #666; Ez a linksáv háttérszín kódja
width: 900px; Ez a linksáv szélessége
height: 30px;
color: #FFF; Ez a linkek betűszíne
margin: 0;
padding: 0;
}"

Nekem itt nem sikerült átállítanom a linkek betűszínét, így tovább kerestem, s végül kiderült, hogy ebben a kódrészletben állítható a betűszín:

#linknav li a, #linknav li a:link, #linknav li a:visited {
color: #d90202;
display: block;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}


Amúgy működik szuperül! :) Még azt az oldalsó dobozos widgetet várom, amit már említettem. :)

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

Ha kilinkelt, akkor igen. Javítom, köszi.

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

Köszönöm, nagyon jó ötlet!
Sikerült:)

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

Egyszerű a sablonom, és nem találom benne a #header részt. Nincs ilyen. Látom, hogy ezek az instrukciók a Minima sablonhoz vannak, de ha most belemegyek a sablontervezőbe, akkor olyan sablonlehetőség nincs. Az 'Egyszerű'-re ez nem használható?

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

Valahogy nekem se találja azt a kereső a kódban hogy #header.Mi lehet a probléma? Így egyáltalán nincs hova beillesztenem a kódot :(

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

@Nikolett
Neked nem Minima sablonod van. Nálad másképp hívják a fejléc részt.

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

@Berta
A Simple sablonban .header-inner a neve.

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

@Wise Lady

Szóval akkor nálam ez nem kivitelezhető? :(

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

Nagyon szeretném ez a funkciót a blogomra de valahogy nem jön össze sehogy sem :(
Nem tudnál nekem segíteni? Ha kérhetem

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

@Nikolett
Jól látom, hogy mégiscsak sikerült?

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

@Wise Lady

Igazából azt szeretném ha mondjuk a Tedd/ Ne tedd cikkek csak annál a fülnél lennének összegyűjtve.
így mint ennél a blognál:
http://charmmymaggie.blogspot.com/

minden témának külön füle van én ezt valahogy nem tudom megcsinálni :D
ezért kérném a segítségedet! :)

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

@Nikolett
Döntsd el, milyen füleket szeretnél, mik a nevek. Ugyanilyen nevű címkéket készíts minden bejegyzésnél is. Sorold be a címkékkel, melyik hova tartozik. Ha kész a címkézés, akkor a LINK1 LINK2 stb. helyekre írd be a címkeneveket. Mentsd el a sablont.
Most a tervezés fülön, az oldalsávban jelenítsd meg a címkék modult, ments.
Menj ki a blogba, és egyenként kattints rá az oldalsávban egy címkére, és másold ki a böngésző címsorából az elérési utakat pl. egy txt fájlba. Így néznek ki:
http://madeinbeauty.blogspot.com/search/label/acimkeneve
Menj vissza a kódhoz, és egyenként rá kell linkelni őket az előbb a LINK1 stb. helyekre beírt nevekre, így: a kimásolt elérési utakat a # helyére kell beszúrni.
<a href='#'>Címke neve</a>

<a href='http://madeinbeauty.blogspot.com/search/label/acimkeneve
'>Címke neve</a>

Ha mind bemásoltad, akkor ments.
Most már az oldalsávban segítségül előhívott címkemodult törölheted.

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

@Wise Lady

Nagyon szépen köszönöm!!!!!!!!!! :))))

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

Szia!

Megcsinátam, de sajna explorer alatt teljes képernyőn nem látszik. http://pokerpenzingyen-lecke.blogspot.com/ mi lehet a gond?

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

@pokerpenzingyen


valami a felbontással lehet

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

@pokerpenzingyen
Valószínű, hogy helyet kell csinálni a navbarnak a fejlécben.
Ezt most hossadalmas lenne itt kommentben leírnom, keress a kapcsolat oldalról emailben.

Culinaria Ungaria írta... [Válasz erre...]

Szia!
Most találtam ezt az oldaladat. A Blogodat ugyan már régóta olvasom, de eddig nem is láttam, hogy te tanácsokat is adsz a szerkesztéshez!! De jó ötlet töled!!! Èn még nem olyan rég vagyok blogtulaj, és szeretném az oldalaimat vízszintesen beállítani, de félek belevágni, ha nem sikerül akkor minden oda és még visszaállítani se tudom. Azzal kezdödik, hogy a legelsö lépést se találom, amit írtál. Szerinted lehet utána még menteni a dolgokat, ha nem tudom egyedül összehozni?? Válaszodat elöre is köszönöm! Üdv: Krisz! :-)

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

@Culinaria Ungaria
Változtatás előtt kell menteni (illetve legalább hetenként). Így, ha valami nem sikerül, akkor 5 másodperc alatt vissza lehet állítani a változtatás előtti blogot.
A mentésről itt olvashatsz.
Sablon és tartalom mentése

Névtelen írta... [Válasz erre...]

Helló!
Megint én vagyok. Köszönöm a gyors választ. A mentést meg is csináltam, az ok. De még mindig vannak aggályaim... Èn eleve nem is találom ezt
"az utolsó #header".
Csak nyomjak egy entert aaz utolsó bejegyzés után, és másoljam be amit ti itt írtál?Ezt ez egész hosszú kódot kell beszúrni utána?? Ne haragudj, de nekem tényleg semmi fogalmam nincs ilyesmiröl! Mintha egy idös nagyinak kellene elmagyaráznod. Köszi! Krisz.

Névtelen írta... [Válasz erre...]

Most olvasom, hogy mint másoknak, nekem is az egyszerü sablonom van. Találtam itt olyat, hogy:

Ide szúrjam be? Az egészet? Krisz! :-)

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

@Krisz
Nem javaslom, hogy a vízszintes navigációval kezdd, ez azért nem olyan könnyű falat. Nem a bejegyzéshez van köze, hanem a HTML kódban kellene változtatni.

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

Szia!

Írtam mailt, de nem tudom, megkaptad-e, vagy nézted-e. ha igen, akkor bocsánat.
Ha nem: akkor ide megfogalmazom. Azt szeretném megtudakolni tőled, hogy hogyan tudnék olyan linksávot csinálni, amilyen az Anya főztje című blogodon van. Ott a tartalom alatt vannak még besorolva. Azt is címkékkel kellene valahogyan megoldanom?
Előre is köszönöm válaszodat!

Üdv: Freeb

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

Szia! Sikerült megcsinálnom a fejléc alá a füleket (http://christytunderke-christystyle.blogspot.com/), de sajnos azt nem tudom összehozni, hogy a fülekhez linkeket is rendeljek. Tudnál nekem segíteni?
Válaszod előre is köszönöm.
Kriszti

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

@Christy
A posztban leírtam, illetve fentebb a kommentekben is. Bővebb infót emailben tudok adni, ha így se megy. Kapcsolat oldlról írhatsz.

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

@Freeb
Nekem többlépcsős navigációm van. Ha a simát megcsináltad, és jó, akkor írj mailt, és folytathatod.

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

@Wise Lady

Köszönöm! Írtam mailt, remélem megkapod. :)

grafirka írta... [Válasz erre...]
Ezt a megjegyzést eltávolította a szerző.
grafirka írta... [Válasz erre...]

Jaj, bocsánat, lemaradt a link:
http://grafirka.blogspot.com/

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

@grafirka
Az első adag kódot rossz helyre tetted be. Keresd meg és vágd ki a jelenlegi helyéről.
Majd másold be a
</style> ELÉ
és ments.

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

Kedves WL! Te aranyat érsz! Sikerült (!), csak sajnos egymás alatt vannak a linkek. De ahogy itt olvasgatok tovább, lehet hogy nem is erre van szükségem? Valójában ilyet szeretnék: http://adrisboltja.blogspot.com/, egy kvázi honlapot, a fejléc alatti linksorral, ahová mindenfélét tölthetek, írhatok. Jó úton haladok, vagy nem? Hálás köszönet a segítségért!

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

@grafirka
De, ez az, amit szeretnél. Próbáld ki ezt:
Az első adag kódban keresd ezt:
display: block;
Cseréld erre:
display: inline;
Talán ez segít.

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

Kedves WL! Nem sikerült, viszont megtaláltam (szintén a te segítségeddel, csak egy másik postban) hogy az új blogspoton ezt be tudom állítani már, viszont nem tudom eltüntetni most azt a linksort, amit odavarászoltam html mód- szerkesztéskor. Elküldöm, most hogyan néz ki: http://grafirka.blogspot.com
Mit tegyek, hogy a függőleges linksor elmenjen onnan? Nagyon köszönöm a türelmedet:)

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

Köszönöm a segítséget, majdnem úgy van, ahogy szerettem volna. Szeretném megkérdezni, hogy a vízszintes link sort hogy tudom középre pozicionálni?

http://kisnyuldolgai.blogspot.com/

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

@Kisnyul
Ezt a részt:
#linknavbar {
background: transparent;
width: 900px;
height: 30px;
color: #462766;
margin: 0;
padding: 0;
}

Változtasd meg így:
#linknavbar {
background: transparent;
width: 900px;
height: 30px;
color: #462766;
margin-left: 25px;
padding: 0;
}

Ha a 25px nem jó, akkor ezt az értéket változtasd, amíg a posztok kezdővonalával egybe nem esik az első link.

Ha tudtam segíteni, akkor kérlek lájkold ezt az oldalamat: LÁJKOLOM

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

Wise Lady, köszönöm a segítséget. Működik. :)

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

@Kisnyul
Örülök. Kérem a lájkot :)

Emese Maczko írta... [Válasz erre...]

Szia!

Nàlam is ez a header-inner van, de nem talàlom a "href" hivatkozàst, ahova be kéne tennem a linket. Az uj oldal màr megvan. Nem ezzel a vizszintes navigàcio koddal, hanem a blogger inditopultban a bejegyezések szerkesztése mellett volt olyan hogy oldalak szerkesztése.

O lenne az: maczkomuhely.blogspot.com
Es a történetek oldalra szeretném rakni a történet cimkével rendelkezö bejegyzéseket.

Köszi

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

@Emese Maczko
Persze, hogy nem találod, ha egyszer nem ezt a kódot használtad. A cikkben le van írva, hogy ez a vízszintes linksáv (amelyre mi linkelünk egyenként) NEM azonos az oldalnavigációval (az statikus tartalmak megjelenítésre használatos, bár egy programozó oldalon is sok mindent meg tud jeleníteni)

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-