vineri, 26 februarie 2010

Personalizati meniul paginilor statice - pe orizontala

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 butonul Previzualizati dupa fiecare modificare pentru a vedea ce se intampla.

37 de comentarii:

  1. Daniel
    am o intrebare ,mi-am facut un blog nou si doresc sa-mi pun toate retetele de pe cel mai vchi pe cel nou cum sa procedez:) sunt doar incepatoare si nu m a prea pricep deocamdata am cam 110 de retete .emilu meu e leo20ancuta@yahoo.
    sa ai o zo buna ....

    RăspundețiȘtergere
  2. noul meu blog e ancutas-completartofcooking.blogspot.com (vechiul si care il mai folosesc putin e anca-retetedelicioase.blogspot.com)daca doresti sa mergi sa vezi ce pot face ...multumesc

    RăspundețiȘtergere
  3. Anca, intri la Setari -- Elementar si prima optiune este Instrumente pentru blog. Da clic pe Exportati blogul si apoi pe Descarcati blogul.
    Astfel ai facut o copie a actualului sablon (include postari si comentarii)

    Apoi intri la Importaţi blogul unde ti se v-a cere sa cauti in calculator un fisier XML (fisierul pe care tocmai l-ai descarcat). Gaseste-l si incarca-l.

    Vezi ca ai acolo si o optiune de publicare. Daca o bifezi postarile vor fi publicate automat, daca nu le poti publica mai tarziu din pagina Editati postari.

    RăspundețiȘtergere
  4. Daniel ,inaite de inporta blogul pe celalalt mai am o intrebare :)
    daca as dori sa il tin pe cel vechi si sa-i schim temple-tul ce se intampla?(mi se va sterge postarile?pt ca m-am gandit ieri ca prienii si fetele care ma urmarsc si le urmaresc va trebui sa ma gseasac din nou :) ......zzz poate este o rezolvare....
    multumesc ,Daniel

    RăspundețiȘtergere
  5. Schimbarea unui sablon nu implica pierderea postarilor.
    Inainte era o problema cu obiectele gadget din sidebar pentru ca ele intradevar erau sterse automat.
    Acum a vazut ca dupa ce incarci fisierul Xml te intreaba daca vrei sa pastrezi obiectele. Daca apesi da atunci nici obiectele nu vor fi sterse.

    RăspundețiȘtergere
  6. Recent mi-am schimbat si eu template-ul la blog si intr-adevar m-a intrebat daca sa pastrez obiectele. Dar totusi, ca sa fi mai sigur ar fi bine sa citesti si acest post care din pacate e in engleza, defapt e un filmulet:http://www.revver.com/video/1108622/backup-blogger-widgets-while-changing-blogger-template/

    P.S.Daniel, de ajutor sit-ul tau!Merci!

    RăspundețiȘtergere
  7. dar daca in loc de culoare vreau sa pun o poza cum fac? :) Cum sunt acum motocicletele alea

    RăspundețiȘtergere
  8. Am si eu aceeasi intrebare:daca vreau sa transform o poza intr-un buton ce se gaseste pe bara de meniu, cum fac?
    Multumiri.

    RăspundețiȘtergere
  9. chopper_lady aceste coduri nu merg bine cu imagini; cel putin nu in sensul in care vrei tu.

    Handmade Team acelasi raspuns.

    RăspundețiȘtergere
  10. te rog frumos spune-mi si mie cum se fac submeniurile?Adica la un buton din meniu numit" produse" atunci cand dau click sa imi apara tipurile de produse cu trimitere care posturile despre fiecare.
    Sper ca m-am facut inteleasa,
    Multumesc mult

    RăspundețiȘtergere
  11. La meniul asta nu merg submeniuri. Da-mi mailul tau si am sa incerc sa te ajut.

    RăspundețiȘtergere
  12. Salut Dani,
    Spune-mi te rog cum se pune meniul asa ca la tine in antet ?
    Si cum controlez inaltimea antetului, cand introduc o imagine, chiar daca
    selectez "potrivire prin reducere" tot inaltime mare are spatiul de la antet, chiar trebuie sa mai micsorez inaltimea imaginii ?

    RăspundețiȘtergere
  13. Salut
    urmezi primul pas de la acest articol, apoi muti obiectul gadget Pagini
    Pentru a doua problema trebuie sa-ti vad blogul pt a-mi da seama.

    RăspundețiȘtergere
  14. am incercat sa aplic ceea ce ai spus tu in articol, dar nu se schimba aspectul meniului paginilor statice. E posibil pentru ca blogul meu e in 3 coloane?
    Ma poti ajuta? Blogul meu este http://brindusascheaua.blogspot.com

    RăspundețiȘtergere
  15. Brindusa ai pus codul gresit.
    Codul trebuie pus asa:

    Cod meniu
    ]]></b:skin>


    Tu l-ai pus astfel:

    Cod meniu
    }
    ]]></b:skin>


    Corecteaza cu grija! Acea paranteza in plus trebuie sa incheie acest cod:
    .footer-column {

    Daca ai facut o copie a sablonului inainte, instaleaz-o si adauga din nou codul

    RăspundețiȘtergere
  16. iti multumesc foarte mult, oricat am fost de atenta, acolada aia mi-a pus capac :))
    Acum merge ;)

    RăspundețiȘtergere
  17. Buna!
    Am si eu o nelamurire!
    Mi-am schimbat template-ul si vreau sa sterg ceva ce e scris sus in header - sus unde scrie "I love you...".
    Adresa blogului meu e http://anotherside-dorina.blogspot.com/
    Multumesc.

    RăspundețiȘtergere
  18. Acel scris este parte dintr-o poza care formeaza sablonul. Singura modalitate este sa modifici poza in photoshop si sa o inlocuiesti in codul CSS.
    Uite poza: http://4.bp.blogspot.com/_iI6SgnnhWEM/S2L_gBMbGjI/AAAAAAAABKE/EjXnE2kEink/s1600/mainbg.jpg

    RăspundețiȘtergere
  19. sa stii ca merge sa pui si poza in fundalul butoanelor , dar trebuie sa mai umbli la cod... :d am ncercat eu, si imi merge... vedeti blogul meu

    RăspundețiȘtergere
  20. eu am pus un o imag cu fundal negru iar pe fundal am agaugat logo-ul

    RăspundețiȘtergere
  21. salut! am si eu o problema...oricat am incercat nu am reusit sa fac sa imi apara mai multe taburi in meniu:(...

    RăspundețiȘtergere
  22. Buna, am reusit să pun gadgetul pagini sub header dar meniul e tot vertical... sub header. De ce nu s-a facut orizontal?

    RăspundețiȘtergere
  23. Hei,am incercat ceea ce ai spus tu la Stilul 1 si am dat la 'Previzualizati' si am observat ca am decat un buton.. cum fac sa am mai multe butoane cum sunt in pozele de la exemplele tale din post?
    Am gresit ceva?
    Merci anticipat.

    RăspundețiȘtergere
  24. Hei, probabil ca ai gresit ceva! Pot sa stiu si eu cate pagini statice ai create?

    RăspundețiȘtergere
  25. Salut...Am si eu o mica mare problema...ok ...este posibil sa inlocuiesti link-urile dintr`o bara de meniu?...sa fiu mai explicit...adica am un template cu o bara de meniu inclusa..gen..si nu merg link-urile...am tot incercat sa modific in html...deci vreau cand apas pe butonul "download" sa ma duca direct la pagina dorita... s.a Mai incerc eu... dar degeaba...nu le am cu asta:) ..e ciudat...Multumesc!

    RăspundețiȘtergere
  26. cum pot pune widget-uri in dreapta imaginii de la blog, de exemplu eu as vrea sa imi pun acolo paginile si widgetul pentru cautare. Cum le pot duce acolo? Astept raspuns. Acesta este blog-ul unde vreau sa fac aceste modificari: http://v-top-40.blogspot.com/
    Multumesc !

    RăspundețiȘtergere
  27. Buna, am si eu o rugaminte. Cum pot pune sub titlu un meniu cu linkuri spre postari in submeniu in blogger.Multumesc.

    RăspundețiȘtergere
  28. cum fac atunci cand pun clicku pe test din meniul pe orizontala sa apara mai jos test1,test2,test3 ...

    RăspundețiȘtergere
  29. Inainte de toate iti multumesc pentru treaba minunata care o faci aici eu sincer mi-am gasit rezolvarea la multe pe blogul meu.
    Acum as vrea sa te intreb daca m-ai pute ajuta la aceiasi problema ca a lui @FlosKa adica sa pun mai multe submeniuri la pagina si sa se deschida in jos in momentul treceri cu maousul deasupra..multumesc PS:(adresa mea de mail e setmefreepc-10@yahoo.com)

    RăspundețiȘtergere
    Răspunsuri
    1. Din pacate nu este posibil la meniul paginilor statice.

      Ștergere
  30. Buna!
    Se pot face submeniuri in blog? Daca da, te rog spune-mi si mie cum, ca ma chinuiesc de 2 zile. Multumesc!

    RăspundețiȘtergere
  31. Tot eu...
    Am gasit o idee in alt site: la pagina principala pun un meniu orizontal cu pagini statice sub titlu si apoi in fiecare pagina statica pun pe o coloana (in stanga) toate submeniurile (categoriile)... Ce zici? Merge?
    Am facut meniul, dar nu stiu cum sa creez paginile.

    RăspundețiȘtergere
  32. Salut... din nou eu
    AM REUSIT !!!
    Designul nu este stralucit, dar functioneaza.
    Pentru cei care doresc:
    - la meniul Pagini creati paginile secundare(submeniurile) si tineti minte adresele (dati vizualizare si o luati din bara de navigare)
    - apoi creati pagina principala cu linkuri catre paginile secundare - care sunt de fapt categoriile (submeniuri). Aici va trebuie adresele.
    - tot aici selectati modul de afisare a paginilor: "Nu doresc sa se afiseze"
    - apoi de la meniul Aspect puneti un gadget cu lista linkuri in care sunt doar optiunile (paginile) principale. Inainte de asta trebuie sa copiati undeva adresa fiecarei pagini, fiindca va cere la crearea listei.
    Eu am pus in stanga, pe verticala, meniul principal si in fiecare pagina am pus pe orizontala submeniurile (categoriile).

    RăspundețiȘtergere
  33. Am si eu o intrebare,te rog.Ma tot chinui de ceva vreme sa adaug bara de meniu pe blogul meu si nu reusesc :( .Mi-a parut util acest articol, am inceput sa urmez pasii, dar nu gasesc codul ]]>.Ce pot sa fac?Vreau neaparat sa imi grupez postarile dupa etichete.Multumesc mult, sper sa imi raspunzi.

    RăspundețiȘtergere
  34. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  35. Buna! Mi-am facut recent un blog pe blogger, am instalat un nou template dar nu ma pricep sa modific meniul. Ma poti ajuta? Am facut pagini si am pus linkurile la "editati HTML, dar cu toate acestea nu am reusit sa fac meniul. Ma poti ajuta? Mersi

    RăspundețiȘtergere