Irányítópult -> Tervezés
Válaszd az oldalsávban a Modul hozzáadása opciót
Válassz HTML/Javascript modulfajtát
Másold bele ezt a kódot:

<ul id="list-nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>

Mentés

Egy egyszerű navigációs sávot kapsz, amely abban a formában jelenik meg, ahogyan a sablonodban az oldalsávhoz tartozó linkek formázva vannak.
Ez a sor egy egység:

<li><a href="#">Link5</a></li>

Másolással akárhányszor megismételheted, azaz 5-nél több linket is készíthetsz, vagy törölhetsz is egy ilyen sort, azaz 5-nél kevesebbet is készíthetsz.

A linkelés:
A # helyére írd be a link URL címét
A Link5 szöveg helyére írd be azt a szöveget, amely kiírva látszódjon.

DEMO itt, az oldalsávban.

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.

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;
}

Oldal: menü készités
css kodok & HTml kodok a hotdogra és más weblapokra is ! - © 2008 - 2024 - csskodok.hupont.hu

Az ingyenes honlapkészítés azt jelenti, hogy Ön készíti el a honlapját! Ingyen adjunk: Ingyen Honlap!

ÁSZF | Adatvédelmi Nyilatkozat