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