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: #FFF;  A 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