Cum sa adaugi un meniu orizontal pe blog

Meniul este unul din cele mai importante parti a unui site sau blog, el oferind vizitatorilor un acces mult mai usor la continutul blogului

In optiunile pe care Blogger le are nu se numara,si posibilitatea de a face pagini statice.
In acest caz trebuie sa facem singuri acest lucru,modificand codul sablonului, lucru care nu e chiar usor pentru cineva care nu se pricepe.

Pentru a usura munca vreau sa va arat o cale destul de usoara de a va pune meniu pe blog, doar cu o mica modificare a coduli html.

Pentru inceput mergeti Aspect --> Editati Html si cautati urmatoarea linie de cod:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Dupa ce ati gasit-o (folositi Ctrl+F) schimbati pe 1 cu 3 si pe no cu yes, apoi salvati sablonul.

Mergeti la pagina "Elemente de pagina" si veti observa acum ca aveti posibilitatea de a aduga un obiect gadget deasupra header-ului.

Clik pe Adaugati un element gadget si alegeti optiunea html/JavaScript. Copieaza urmatorul cod html de mai jos si lipestel in campul pentru continut.

COD HTML:

<style type="text/css">

#meniu {
margin-left:-40px;
}

#meniu ul li{
display:inline;
list-style-type: none;
font-size:120%;
font-weight: bold;
padding:0px;
margin:0px;
}

#meniu li a{
margin:2px;
padding:5px 10px 5px 10px;
color:#ffffff;
background-color:#2D0089;
border:1px solid #FF6702;
}

#meniu li a:hover {
color: #ffffff;
background: #3CC3FD;
}
</style>

<div id="meniu">
<ul>
<li><a href="http://url-ul tau">Acasa</a></li>
<li><a href="http://url-ul tau">Feed</a></li>
<li><a href="http://url-ul tau">Contact</a></li>
<li><a href="http://url-ul tau">Informatii</a></li>
</ul>
</div>

Inlocuiti ce este scris cu rosu "http://url-ul tau" cu url-ul paginilor care va intereseaza, iar ce este cu albastru inlocuiti-le cu numele paginilor alese
Salvati editarea si gata avesti instalat meniul pe blog.
De asemenea ai posibilitatea de a modifica anumiti parametri cum ar fi: textul mai mic sau mai mare,sau vrei ca meniul sa apara in partea stanga sau dreapta.

Aeste modificari le explic mai jos,am copiat din nou codul html si am notat in dreptul fiecarui parametru ce se poate modifica.

Exemplu de modificari cod:

#meniu ul li{
display:inline;
list-style-type: none;
font-size:120%; - modifica marimea textului in procente
font-weight: bold; - face textul bold; pentru text normal inlocuiti bold cu normal
padding:0px;
margin:0px;
}

#meniu li a{
margin:2px; - mareste distanta intre texte
padding:5px 10px 5px 10px; - pune o distanta intre text si bordura care inconjuara textul; sus - dreapta - jos - stanga
color:#ffffff; - modifica culoarea textului
background-color:#2D0089; - modifica fundalul textului
border:1px solid #FF6702; - pune o bordura in jurul textului; 1 = grosimea bordurii; #FF6702 = culoarea bordurii
}

#meniu li a:hover {
color: #ffffff; - modifica culoarea textului la mouseover(atunci cand treceti mouse-ul peste text
background: #3CC3FD; - modifica fundalul textului la mouseover
border:1px solid #FF6702; - modifica bordura la mouseover
}

Daca intampini vre-o problema atunci lasati un comentariu si voi incerca sa te ajut.