Cum sa personalizezi o pagina statica pe blogger | Tutoriale bune pentru Blogger, WordPress & internet

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)


<b:if cond='data:blog.url == "PUNE URL-UL TAU AICI"'>
<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>


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 == "static_page"'>

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 folosindgeneratorul 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='"loading" + data:blog.mobileClass'>

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


<b:if cond='data:blog.url == "PUNE URL-UL TAU AICI"'>
<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>


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