miercuri, 10 noiembrie 2010

Cum sa personalizezi o pagina statica

Pe blogger paginile statice arata la fel ca si o postare obisnuita, ele continand si sidebarul si footerul. Daca de exemplu vreti sa puneti un video intr-o pagina statica atunci va trebui sa il puneti cu o latime egala cu latimea corpului postarii. Dar daca vreti ca playerul video sa fie foarte lat, poate chiar cat latimea sablonului, atunci din pacate nu este o optiune care sa va permita sa faceti acest lucru.
Pentru a intelege mai bine despre ce vorbesc vedeti aceasta pagina. Demo.

Si totusi, cum Blogger ne lasa sa editam codul sablonului exista posibilitatea sa facem acest lucru cu ajutorul tagurilor conditionale pe care blogger le foloseste in sablon.
Putem folosi aceste taguri pentru a personaliza o singura pagina statica, toate paginile statice si chiar postare normala.
O singura observatie ar mai fi, si anume: acest truc functioneaza (in forma in care va prezint codul lui) in sabloanele vechi gen Minima, Denim, Rounders, etc si in cele create cu designerul de sabloane. Cei care au sabloane luate de pe alte site-uri vor trebui sa gaseasca id-ul sidebarurilor si a footerului si sa inlocuiasca in cod denumirile.




Personalizarea paginilor statice in sabloanele vechi
1.  Intrati la Design --> Editati html si faceti o copie de siguranta a sablonului. Lasati nebifata casuta pentru extinderea codului.
2. Cu ajutorul combinatiei de taste Ctrl+F gasiti acest cod:  <body>
3. Dupa ce l-ati gasit, copiati imediat dupa el urmatorul grup de coduri:
(Pentru personalizarea paginilor dupa url)

<!-- Static page styling Start-->
<b:if cond='data:blog.url == &quot;PUNE URL-UL TAU AICI&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; background:#C9C6B8; margin: 0 auto !important;}
</style>
</b:if>
<!-- Static page styling End -->

Codul de mai sus personalizeaza un singur url, fie el pentru pagina statica sau pentru postare obisnuita.
Daca doriti ca toate paginile statice sa arate la fel atunci trebuie sa inlocuiti codul scris cu rosu cu acesta:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Obtiuni si observatii:
Codurile scrise cu verde reprezinta parti ale sablonului care nu vor aparea in pagina respectiva. Ele pot fi sterse in functie de dorinta voastra.
.blog-pager,   --> reprezinta partea cu navigatia (postari mai vechi si postari mai noi) Daca doriti sa apara in pagina atunci stergeti acest cod.
.footer,            --> reprezinta partea de jos a sablonului.
.post-footer,   --> partea de jos a postarii
.feed-links,     --> link-urile cu fedurile de sub postare
.sidebar          --> reprezinta sidebarul

Codurile CSS scrise cu albastru sunt definitii ale corpului postarii si definesc modul cum corpul postarii va fi afisat in pagina.
In afara de background:#C9C6B8; restul trebuie sa ramana asa cum sunt. Codul care defineste fundalul postarii il puteti sterge daca nu doriti un fundal aparte, sau il puteti personaliza folosind generatorul de culori.

Personalizarea paginilor statice in sabloanele facute cu designerul de sabloane.
1.  Intrati la Design --> Editati html si faceti o copie de siguranta a sablonului. Lasati nebifata casuta pentru extinderea codului.
2. Cu ajutorul combinatiei de taste Ctrl+F gasiti acest cod:   

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3. Dupa ce l-ati gasit copiati imediat dupa el urmatorul grup de coduri:
(Pentru personalizarea paginilor dupa url)

<!-- Static page styling Start-->
<b:if cond='data:blog.url == &quot;PUNE URL-UL TAU AICI&quot;'>
<style>
.blog-pager, .footer, .footer-outer, .post-footer, .feed-links, .sidebar, .fauxcolumn-right-outer, .fauxcolumn-left-outer { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important; background:#C9C6B8; padding-right:0 !important;}
</style>
</b:if>
<!-- Static page styling End -->

Obtiuni si observatii:
Codurile scrise cu verde reprezinta parti ale sablonului care nu vor aparea in pagina respectiva. Ele pot fi sterse in functie de dorinta voastra.
.blog-pager,      --> reprezinta partea cu navigatia (postari mai vechi si postari mai noi) Daca doriti sa apara in pagina atunci stergeti acest cod.
.footer,               --> reprezinta partea de jos a sablonului.
.footer-outer,     --> reprezinta cele 3 footere (daca alegeti sa aveti 3 footere atunci cand creati sablonul)
.post-footer,      --> partea de jos a postarii
.feed-links,        --> link-urile cu fedurile de sub postare
.sidebar             --> reprezinta sidebarul
.fauxcolumn-right-outer,    --> reprezinta linia care desparte corpul postarii de sidebar
.fauxcolumn-left-outer       --> reprezinta linia care desparte corpul postarii de sidebar

Codurile CSS scrise cu albastru sunt definitii ale corpului postarii si definesc modul cum corpul postarii va fi afisat in pagina.
In afara de background:#C9C6B8; restul trebuie sa ramana asa cum sunt. Codul care defineste fundalul postarii il puteti sterge daca nu doriti un fundal aparte, sau il puteti personaliza folosind generatorul de culori.
 Truc inspirat de aici: Apply different layout/styling to static pages


18 comentarii:

  1. Acest comentariu a fost eliminat de administratorul blogului.

    RăspundețiȘtergere
  2. am si eu o problema, mi-am adaugat un domeniu .com la blogul meu din platforma blogger, dar cand scriu cu http://mydomeniu.com nu imi apare site-ul meu , dar cand pun www. in fata imi apare exact ce trebuie, am bifat si optiunea de distribuire de pe blogger ,dar tot nu-mi apare :(

    ce trebuie sa fac?

    RăspundețiȘtergere
  3. Salut am si eu o problema mareeee,cand vrusai sa postez pe blog imi aparu asa
    Hopa! Nu mai aveţi spaţiu liber. Achiziţionaţi spaţiu de stocare suplimentar.
    Fotografiile sunt stocate în contul dvs. Picasa Web Albums şi sunt incluse în spaţiul gratuit de 1 GO pentru fotografii. Spaţiul suplimentar de stocare pe care îl achiziţionaţi este distribuit între Gmail, Picasa Web Albums şi Google Docs şi se adaugă la spaţiul gratuit. Aflaţi mai multe
    in cazul asta ce este de facut???????

    RăspundețiȘtergere
  4. Daca vreau sa Achiziţionez spaţiu de stocare suplimentar e cu banii.

    RăspundețiȘtergere
  5. Salut
    se pare ca ai utilizat 1 Giga, spatiu pus la dispozitie de blogger pentru a urca poze.
    Ar fi doua variante: fie iti faci alt cont si urci pozele acolo, fie cumperi spatiu.
    Cel mai mic plan de cumparare este 20 giga = 5 dolari pe an.
    Ca sa vezi despre ce este vorba intra aici: http://picasaweb.google.com/home si in partea de jos a paginii vei gasii link-ul Upgrade stocare
    Clic pe el pt detalii.

    RăspundețiȘtergere
  6. Am si eu o intrebare da wordpress are mai mult stapiu de stocare,s-au e nelimitat?

    RăspundețiȘtergere
  7. Salut, foarte interesant blogul, permite-mi sa iti pun cateva intrebari, si daca doresti sa imi si raspunzi ti-as fi recunoscator.
    1. Cum pot scoate navbar-ul acela?
    2. Cum pot adauga butoanele acelea gen: home, unelte, etc, acele butoane depind de template-ul blogului?
    3. O seara placuta.

    RăspundețiȘtergere
  8. Punctul 2 rezolvat(m-am uitat mai bine pe acest blog). Multumesc, ramane 1 daca doresti sa ma ajuti.

    RăspundețiȘtergere
  9. Tutorialele le gasesti pe acest blog. Foloseste functia de cautare.

    RăspundețiȘtergere
  10. Buna!
    Am si eu o problema cu blogul.
    Mi-am schimbat de curand sablonul la blogger si acum se repeta postarile de doua ori pe prima pagina.(si in tabloul de bord imi apar de doua ori postarile de blog, dintre care un chenar e static si celalalt poate fi mutat, ca si un obiect gadget).
    Eu am mutat al doilea chenar cu postari in bara laterala, credeam ca asa voi scapa de ele, dar nu a mers, tot imi apar.
    Nu stiu cum sa elimin acest element, ca daca modific ceva, de exemplu sa apara doar o postare, se modifica si la celalat chenar.
    Sper ca ai inteles ce am vrut sa-ti explic.
    Multumesc.

    RăspundețiȘtergere
  11. Buna...sa inteleg ca inainte de a modifica/incarca noul sablon nu ai facut un back-up sablonului initial?

    RăspundețiȘtergere
  12. Buna! Am aceeasi problema ca Dorina, cum as putea elimina unul dintre cele doua chenare? Inainte de a modifica noul sablon am facut back-up sablonului initial, dar l-am sters din greseala.

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

    RăspundețiȘtergere
    Răspunsuri
    1. Dane, merge de minune, nu credeam ca va arata asa bine. Like pentru acest tutorial. Foarte util >Motorul de cautare personalizat<

      Ștergere
  14. Buna!
    In legatura cu conditionarea paginilor... eu am meniuri cu etichete si ca sa nu apara toate postarile in Home am redirectionat pagina de pornire catre .../search/label/Acasa (o postare cu eticheta Acasa). Acum, cand selectez o optiune (eticheta) apare o problema la paginatie: imi afiseaza toate postarile cu acea eticheta, chiar daca eu am setat sa fie doar 7 postari pe pagina. Cred ca este din cauza redirectionarii.
    Ai vreo idee cum as putea rezolva problema?

    RăspundețiȘtergere