Cum sa adaugi un meniu orizontal pe Blogger

Meniul este unul din cele mai importante parti a unui site sau blog, el oferind vizitatorilor un acces mult mai usor la continutul blogului
Printre optiunile de pe Blogger nu se numara, din pacate, si posibilitatea de a face pagini statice, ca in Wordpress unde se genereaza automat si meniul. Pe Blogger trebuie sa facem singuri acest lucru,umbland pe la codul sablonului, lucru care nu e chiar usor pentru cineva care nu se pricepe.

In acest articol vreau sa va arat o cale destul de usoara de a va pune meniu pe blog, doar cu o mica modificare in Html-ul sablonului.




Pentru inceput trebuie sa va alegeti paginile care vor forma meniul si sa le scrieti url-ul si titlul intr-un editor de text cum ar fi Notepad.

Apoi urmati calea 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.

Acum duceti-va la pagina "Elemente de pagina" si veti vedea ca acum aveti posibilitatea de a aduga un obiect gadget si deasupra header-ului.

Dati clic pe Adaugati un element gadget si alegeti optiunea Html/JavaScript. In campul pentru continut copiati urmatorul 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">Home</a></li>
<li><a href="http://url-ul tau">Feed</a></li>
<li><a href="http://url-ul tau">About Me</a></li>
<li><a href="http://url-ul tau">Contact</a></li>
</ul>
</div>

Inlocuiti ce este scris cu rosu "http://url-ul tau" cu url-ul paginilor pe care le-ati ales, iar ce este cu albastru inlocuiti-le cu numele paginilor alese. Aceste cuvinte vor aparea in meniul vostru, deci alegeti un nume care sa fie reprezentativ pentru continutul paginii.
Dupa ce ati copiat codul, salvati gadgetul si trageti-l sub header. Salvati editarea si vedeti cum arata meniul.

Cam asta ar fi, dar sunt convins ca fiecare are diferite culori pe blog asa ca, culorile pe care eu le-am ales eu pentru demo nu se potrivesc cu ale voastre. Sau poate vreti scrisul mai mic, sau vreti ca meniul sa apara in partea stanga, sau in partea dreapta, asa ca in continuare va voi arata cum sa modificati partea de Css a codului pe care vi l-am aratat.

Voi copia din nou prima parte a codului de mai sus si va voi arata ce puteti schimba la el pentru a se nimeri cu sablonul vostru.

#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 vreti ca meniul sa apara in partea stanga atunci dupa aceasta linie:

#meniu {

copiati urmatorul cod:

float:left;

Daca vreti ca meniul sa apara in parte dreapta atunci dupa aceasta linie:

#meniu {

copiati urmatorul cod

float:right;

Daca mai intampinati si alte probleme atunci lasati un comentariu si voi incerca sa va ajut.