Personalizati meniul paginilor statice - pe orizontala | Tutoriale bune pentru Blogger, WordPress & internet

De curand Blogger a oferit posibilitatea de a crea pagini statice si daca ati citit articolul scris de mine pe aceasta tema ati vazut ca pe langa optiunea de a crea pagini statice avem posibilitatea de a le lega automat intr-un meniu.
O optiune foarte importanta dupa parerea mea, scutind astfel pe multi de a se mai complica cu codurile html.
Dar din pacate Blogger nu ne ofera nici o posibilitate de a personaliza meniul, el fiind doar titlul pagini pe fundalul sablonului. Partea buna este ca avand acces la codul html al sablonului putem totusi sa ne facem singuri o personalizare a meniului.
In continuare am sa va arat cum sa personalizati meniul pe orizontala si pentru asta am pregatit coduri pentru 2 stiluri diferite de meniu.

Acest cuvant PageList1 pe care il gasiti in codul pe care trebuie sa-l copiati in sablon reprezinta id-ul gadget-ului Pagini pe care vreti sa-l personalizati. El primeste acest id automat cand adaugati obiectul gadget. Deci in mod normal ar trebui ca atunci cand adaugati codul, meniul sa se personalizeze automat.

Daca nu merge, atunci o metoda usoara de a afla ce id are obiectul gadget Pagini pe care vreti sa-l personalizati este asta:
Intrati astfel: Aspect --> Elemente de pagina si localizati obiectul pe care vreti sa-l personalizati. Dati clic pe Editati pentru al edita. Cand pagina se deschide in pop-up dati clic pe butonul de marire a ei si sus in bara de adrese veti gasi un URL care se termina in:
sectionId=crosscol&widgetType=null&widgetId=PageList1
Cel scris cu rosu este id-ul

1. Stilul unu - fundal pentru butoane plus fundal diferit pentru pagina activa.
Acest stil merge pe toate sabloanele default de la Blogger, dar e posibil ca la unele sa trebuiasca sa modificati valorile de la margini si padding-uri.

Mod de instalare:
1.1 Nu uitati ca aceste coduri functioneaza corect doar cand gadget-ul Pagini este in pozitie orizontala, adica sub header. Deci daca gadget-ul este in sidebar mutati-l sub header si salvati.

1.2 Mergeti la pagina Aspect --> Editati html si ca de obicei cand umblati la codul sablonului faceti o copie a acestuia.

1.3 Folosind combinatia de taste Ctrl+F cautati acest cod: ]]></b:skin> si inaintea lui copiati urmatorul grup de coduri:

#PageList1 li {
    list-style-type: none;
    font-size:16px;
    padding:0px;
    margin:10px 0px 10px 0px;
    }

#PageList1 li a {
    background-color:#2D0089;
    color:#ffffff;
    margin-right:2px;
    padding:4px 10px 4px 10px;
    border: solid 1px #3CC3FD;
    text-decoration:none;
    }

#PageList1 li a:hover {
    color: #ffffff;
    background-color: #3CC3FD;
    border: solid 1px #2D0089;
    }

#PageList1 .selected a {
    background-color:#3CC3FD;
    border: solid 1px #2D0089;
}

1.4 Previzualizati si daca va place cum arata atunci Salvati.
Daca nu arata asa cum doriti atunci puteti incerca sa le modificati urmand indicatiile de mai jos.
Acum voi scrie codul din nou si va voi arata ce puteti modifica pentru al face sa arate asa cum vreti:

#PageList1 li{
    list-style-type: none;
    font-size:16px; ---> modifica marimea literelor
    padding:0px;
    margin:10px 0px 10px 0px;   --> modifica distanta dintre meniu si celelalte elemente (sus, dreapta, jos, stanga)
    }

    #PageList1 li a {
    background-color:#2D0089; --> modifica culoarea butoanelor
    color:#ffffff;   --> modifica culoarea literelor
    margin-right:2px; --> modifica distanta, in dreapta, intre butoane
    padding:4px 10px 4px 10px; --> modifica distanta intre cuvantul din buton si marginea acestuia (mareste butonul astfel: sus, dreapta, jos, stanga)
    border: solid 1px #3CC3FD; --> modifica culoarea chenarului butoanelor neactive (daca vreti sa scapati de chenar atunci dati-i valoarea 0 - zero)
    text-decoration:none;
    }

    #PageList1 a:hover {
    color: #ffffff;    --> modifica culoarea scrisului la trecerea mouseului peste buton
    background-color: #3CC3FD;    --> modifica culoarea butonului la trecerea mouse-ului peste el
    border: solid 1px #2D0089;    --> modifica culoarea chenarului butonului la trecerea mouse-ului peste buton
    }

#PageList1 .selected a {
    color: #ffffff;   --> modifica culoarea scrisului la butonul activ (butonul care corespunde paginii selectate).
    background-color:#3CC3FD;    --> modifica culoarea butonului activ
    border: solid 1px #2D0089;    --> modifica culoarea chenarului butonului activ
}

Personalizati-le in functie de culorile sablonului vostru.

2. Stilul doi - fundal pe toata latimea sablonului, plus personalizare pentru butoane, plus fundal diferit pentru pagina activa.
Si acest stil merge pe toate sabloanele default de la Blogger, dar la unele trebuiea sa modificati valorile de la margini si padding-uri pentru a se incadra bine in sablon.

Mod de instalare:
2.1 Nu uitati ca aceste coduri functioneaza corect doar cand gadget-ul Pagini este in pozitie orizontala, adica sub header. Deci daca gadget-ul este in sidebar mutati-l sub header si salvati.

2.2 Mergeti la pagina Aspect --> Editati html si ca de obicei cand umblati la codul sablonului faceti o copie a acestuia.

2.3 Folosind combinatia de taste Ctrl+F cautati acest cod: ]]></b:skin> si inaintea lui copiati urmatorul grup de coduri:

#PageList1 {
    background:#2D0089;
    padding:0px 0px 0px 0px;
    margin:8px 0px 8px 0px;
}

#PageList1 li{
    list-style-type: none;
    font-size:16px;
    padding:0px;
    margin:8px 0px 8px 0px;
    }

#PageList1 li a {
    background:#2D0089;
    color:#ffffff;
    padding:8px 20px 8px 20px;
    text-decoration:none;
    border-right:solid 1px #fff;
    }

#PageList1 li a:hover {
    border-top: solid 0px orange;
    padding:8px 20px 8px 20px;
    color: #ffffff;
    background:#3CC3FD;
    }

#PageList1 .selected a {
    background:#3CC3FD;
    color: #ffffff;
}

2.4 Previzualizati, si daca va place cum arata, Salvati.
Daca nu arata asa cum doriti atunci puteti incerca sa le modificati urmand indicatiile de mai jos.
Voi scrie si aici codul din nou si va voi arata ce puteti schimba

#PageList1 {
    background:#2D0089;     --> modifica fundalul intregului meniu (el trebuie neaparat sa fie de aceeasi culoare cu fundalul de la acest punct: #PageList1 li a {    )
    padding:0px 0px 0px 0px;
    margin:8px 0px 8px 0px;    --> modifica distanta dintre meniu si celelalte elemente (sus, dreapta, jos, stanga)
}

#PageList1 li{
    list-style-type: none;
    font-size:16px;   ---> modifica marimea literelor
    padding:0px;
    margin:8px 0px 8px 0px;   ---> modifica grosimea intregului fundal
    }

#PageList1 li a {
    background:#2D0089;   --> modifica culoarea butoanelor
    color:#ffffff;   --> modifica culoarea literelor
    padding:8px 20px 8px 20px;   --> modifica distanta intre cuvantul din buton si marginea acestuia (mareste butonul astfel: sus, dreapta, jos, stanga)
    text-decoration:none;
    border-right:solid 1px #ffffff;    --> modifica culoarea liniei dintre butoane
    }

#PageList1 li a:hover {
    color: #ffffff;   --> modifica culoarea scrisului la trecerea mouse-ului peste buton
    background:#3CC3FD; --> modifica culoarea butonului la trecerea mouse-ului peste buton
    }

#PageList1 .selected a {
    color: #ffffff;   --> modifica culoarea scrisului la butonul activ (butonul care corespunde paginii selectate).
    background:#3CC3FD;   --> modifica culoarea butonului activ
}

Nu ezitati sa va jucati cu valorile. Atata timp cat nu salvati nu se intampla nimic. Folositi butonulPrevizualizati dupa fiecare modificare pentru a vedea ce se intampla.