sâmbătă, 20 iunie 2009

Cum sa creezi sabloane cu trei coloane pentru Blogger

Este un pic incorent spus 'a creea' pentru ca de fapt veti invata cum sa modificati un sablon dat by default de Blogger si anume 'Sablonul Minima'. Deci vom modifica un sablon gata creat cu 2 coloane si il vom transforma intr-un sablon cu trei coloane, adica un sablon cu o coloana principala pentru postare si 2 sidebar-uri unul stanga si unul dreapta.






Pentru cei care deja au un blog si au instalat sablonul Minima  si vor sa-l modifice ar fi bine sa salveze o copie in calculator pentru a putea reveni la el in caz ca ceva merge rau. Pentru a face asta urmati calea "Aspect --> Editati html", dati clic pe "Descarcati sablonul complet" si salvati-l intr-un folder pe calculatorul vostru.

Pentru cei care doar vor sa vada cum se poate face un sablon cu trei coloane ar fi bine sa creeze un nou blog numit Test sau ceva asemanator pe care sa incerce acest experiment. Daca ati ales aceata varianta selectati si sablonul Minima ca sablon pentru blog. Nu uitati sa scrieti un articol sau doua si sa adaugati un gadget Text in sidebar. Aici gasiti text care nu inseamna nimic dar care se aseaza foarte bine in coloane astfel observand mai bine ce se intampla cand editam sablonul

Dar sa incepem. Cred ca toata lumea stie cum arata sablonul Minima si nu mai trebuie sa pun o poza aici.

In prima faza vom merge la pagina Aspect si apoi Editati Html. Lasati nebifata optiunea de extindere a sablonului. Sablonul Minima are un Width (latime) de  660 de pixeli si care include coloana de postare cu latimea de 410 pixeli si un sidebar dreapta cu latimea de 220 pixeli.

Sablonul pe care il vom creea va avea trei coloane: coloana de postare, sidebar stanga si sidebar dreapta. Vom aduce sablonul la o latime de 970 de pixeli pentru a avea loc si cel de-al doilea sidebar. Pentru a face asta sa vedem mai intai care sunt cele 5 parti ale sablonului pe care le vom modifica. Folositi combinatia Ctrl+F pentru a gasi mai usor cand cautati ceva.

1. Capul sablonului  (header) -  are denumirea de #header-wrapper  si reprezinta partea de sus a sablonului, acolo unde este titlul blogului.
2. Corpul sablonului denumit #outer-wrapper . In el sunt incluse si cele 2 coloane.
3. Coloana de postare - are denumirea de #main-wrapper si este coloana pe care apar articolele voastre.
4. Sidebar-ul sablonului este denumit #sidebar-wrapper si este coloana in care se adauga elementele gadget ale blogului.
5. Footer-ul sablonului este denumit #footer in sablonul Minima si este partea de jos a sablonului.

Vom incepe prin modificarea corpului sablonului.
Cautati urmatoarea linie de cod:

#outer-wrapper {

si imediat sub ea gasiti

width: 660px;

Aceasta este latimea actuala a sablonului. Vom modifica aceasta latime prin schimbarea volorii de 660 cu 970. Pentru a va face o idee cum arata acum sablonul vostru dati clic pe previzualizare.

Dupa ce am latit corpul sablonului este timpul sa facem la fel cu header-ul si footer-ul lui.
Cautati linia de cod

#header-wrapper {

si apoi

#footer {

imediat sub ele gasiti la fel ca mai sus codul width:660px; modificati-l cu valoarea 970. Tocmai am dat drumul la header si footer si le-am adus la latimea corpului sablonului. Previzualizati.

Acum pentru a creea cel de-al treilea sidebar gasiti si dati Copy la acest cod:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Imediat sub aceasta bucata de cod dati Paste  pentru a-l adauga din nou.

Pentru ca el trebuie sa aiba o denumire unica vom modifica aceasta parte:

#sidebar-wrapper {

cu aceasta

#sidebar2-wrapper {

si pentru ca va fi in fata coloanei principale, adica in partea stanga vom modifica si aceata parte:

float: $endSide;

cu aceasta:

float: $startSide;

Pentru a defini al doilea sidebar trebuie sa cautam acest cod

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postări de blog' type='Blog'/>
</b:section>
      </div>

si inainte de el sa adaugam acest cod:

<div id='sidebar2-wrapper'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Obsevati ca al doilea sidebar are denumirea si id-ul "sidebar2" la fel cum am schimbat si mai sus.

In acest moment sablonul nostru in afara ca s-a latit nu prea arata cu ce vroiam noi sa facem. Dar totusi este schimbat si a venit momentul sa salvam sablonul. Dupa ce l-am salvat vom merge la "Elemente de pagina" si aici ar trebui sa vedeti ceva asemanator cu aceasta poza.





Dupa cum observati s-a creat si sidebarul din stanga dar deocamdata nu avem nimic adaugat in el. Este timpul sa adaugam un obiect gadget si in acest sidebar. Adaugati tot un gadget Text pentru a vedea in continuare cum arata sidebarul dupa ce vom adauga margini si padding-uri.
Acum blogul vostru ar trebui sa arate asa:




Sablonul este inca departe de a arata asa cum ne dorim, asa ca vom reveni la pagina de editare a html-ului. In acest moment avem doua sidebar-uri cu o latime totala de 440 pixeli. Ne raman 530 de pixeli pentru coloana principala. Cautati urmatorul cod:

#main-wrapper {

si imediat sub el veti gasi width: 410px; schimbati valoarea 410 cu 530.

Blogul vostru ar trebui sa arate asa:




Observati cum cele 3 coloane sunt foarte apropiate intre ele neexistand nici un pic de spatiu.  Pentru a observa mai bine cum se comporta sablonul cand il editam vom adauga borduri in jurul sidebar-urilor si al coloanei de postare.
Cautati in aceasta ordine urmatoarele linii de cod:

#main-wrapper {
#sidebar-wrapper {
#sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

border: 1px solid #000000;

Previzualizati si vedeti cum sidebarul din dreapta a cazut sub coloana de postare. Asta este din cauza ca am adaugat inca 6 pixeli in interiorul corpului sablonului. Pentru ca sidebar-ul sa revina in dreapta vom scadea din latimea coloanei de postare. Cautati codul

#main-wrapper { 

si sub el gasiti width: 530px; modificati 530 cu 524
Previzualizati si vedeti ca sidebar-ul dreapta a revenit pe pozitie.


In continuare vom desparti coloanele intre prin adaugarea unei margini. Cauta urmatoarele linii:

#sidebar2-wrapper {
#main-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

margin-right: 10px;

Previzualizati si vedeti ca din nou sidebar-ul drept a cazut in jos, din cauza celor 20 de pixeli adaugati. Din nou vom scadea din latimea coloanei de postare.
Cautati deci codul:

#main-wrapper { 

si sub el gasiti width: 524px; schimbati pe 524 cu 504 si previzualizati.  Dupa cum vedeti sidebar-ul a revenit pe pozitie. Observati si spatiul dintre coloane.

Sablonul incepe sa semene cu ceea ce ne doream, dar mai este o problema de rezolvat. Dupa cum vedeti in sablon textul este lipit de bordura pe care am adaugat-o coloanelor.  In acest moment aveti 2 variante de rezolvare.

1. Daca nu doriti sa aveti bordura in jurul coloanelor tot ce trebuie sa faceti este sa cautati acolo unde ati adaugat aceasta linie :

border: 1px solid #000000;

 si sa schimbati valoarea lui 1 cu 0 si bordurile vor disparea rezolvand astfel si problema textului lipit de bordura.

Update: Stergand bordurile latimea celor trei elemente scade cu 6 pixeli. Acesti 6 pixeli ii vom adauga la main-wrapper.
Cautati deci aceste linii

#main-wrapper {
width: 504px;

si schimbati pe 504 cu 510.




2. Daca doriti sa pastrati bordura din jurul coloanelor atunci urmati aceasta varianta.  Cautati aceste linii:

#main-wrapper {
#sidebar-wrapper {
#sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

padding: 0 5px 0 5px;

Previzualizati.

Prin adaugarea acestei linii din nou sidebar-ul din dreapta cade, datorita adaugarii a 30 de pixeli in plus. Pentru a reveni la normal din nou trebuie sa taiem din latimea coloanelor. Deci acum ramane la alegerea voastra din care sa taiati. Cautati urmatoarele linii:

#main-wrapper {
#sidebar-wrapper {
#sidebar2-wrapper {

Sub fiecare dintre ele veti gasi si latimea :

#main-wrapper {
width: 504px;
   modificati 504 cu 494

#sidebar-wrapper {
width: 220px;
   modificati 220 cu 210

#sidebar2-wrapper {
width: 220px;
   modificati 220 cu 210

Previzualizati si daca va place cum arata sablonul creat de voi, salvati-l.

Ar mai fi o problema. Dupa cum cred ca ati observat descrierea blogului este decalata fata de titlul blogului. Pentru a rezolva asta gasiti acest fragment de cod:

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

Stergeti aceasta linie

 max-width:700px;

si prezizualizati. Daca e bine salvati.

Cam asta ar fi crearea unui sablon cu trei coloane prin modificarea sablonului Minima.

Succes!

45 de comentarii:

  1. si eu te am la blogroll.ast sa ma pui si tu

    RăspundețiȘtergere
  2. sal ai vreun raspuns pentru mine la rugamintea mea??
    ria venit vreo idee in a realiza o tema care sa se potriveasca blogului?
    o zi placuta sa ai

    RăspundețiȘtergere
  3. unde?:(ca la blogroll sunt numai"chilotei de vedeta":(

    RăspundețiȘtergere
  4. uite am urmat pasii pe care i-ai enumerat aici...dar daca te uiti la blogul meu....nu e centrat adik tot imi apare in stanga de la inceputul randului. Ce pot modifica ca "imaginea" siteului sa imi apara centrata pe ecran?

    RăspundețiȘtergere
  5. Florina,
    intradevar am facut o mica greseala pe care am editat-o deja in post.

    Dar iti voi spune si aici ce trebuie sa faci:
    Cauta

    #main-wrapper {
    width: 504px;


    si schimba pe 504 cu 510.

    Apoi ca sa reglezi header-ul (aici ai facut si tu o greseala :) ) cauta outer-wrapper si undeva mai jos gasesti la tine in sablon linia asta:

    margin: 0auto;

    modific-o sa arate ca asta:

    margin:0 auto;

    Previzualizeaza si apoi primeste scuzele mele. :)

    RăspundețiȘtergere
  6. am reusit pana la urma ieri sa fac chestia asta...mi-am scos firebug si mi-am dat seama ca nu am lasat spatiu ala :). Mersi oricum :)

    RăspundețiȘtergere
  7. Am incercat ambele variante si functioneaza ireprosabil. Trebuie mai multa atentie si parca, varianta asta este mai faina. Acum mai depinde si de placerea fiecaruia ...

    RăspundețiȘtergere
  8. Vroiam sa te intreb daca as putea sa pun backround in coloane? Adica sa existe o imagine de backround al blogului dar ca sa nu se confunde scrisul cu backroundul coloanele sa fie inscrise in niste chenare albe.

    RăspundețiȘtergere
  9. Se poate pune o culoare de fond fiecarei coloane?

    RăspundețiȘtergere
  10. Cristi vezi comentariul de mai sus.

    RăspundețiȘtergere
  11. help!
    am o problema.. ~x
    am creat shablonul acum cateva zile, a functionat ireproshabil, dar azi mi-a picat coloana din dreapta sub coloana de postare, instantaneu..
    am incercat sa creez din nou shablonul( practic am luat-o de la 0)..dar rezultatul este acelashi! :( sidebarul din dreapta a cazut sub coloana de postare.
    ce sa fac?

    RăspundețiȘtergere
  12. Am o problema am shimbat in 3 coloane blog-ul si as vrea fondalul sa-l schimb si nu reusesc ,am tot incercat la body backgrund sa daug si nu functioneaza
    Te rog mult sa ma ajuti nu stiu ce sa fac.
    body {
    background:#000000 url
    ('http://2.bp.blogspot.com/_EIhEdDpx9Ak/ScdziNYkasI/AAAAAAAAAbE/dR8G6BGUrH8/s1600-h/tabla+52.jpg') no-repeat;

    RăspundețiȘtergere
  13. Sell@ citeste si postarea asta

    Codul tau pare bun, ar trebui sa mearga dar s-ar putea ca link-ul pozei sa nu fie bun. Cand vrei sa iei link-ul unei poze postate pe blogger intai dai clic pe poza din postare, astepti sa se deschida in noua pagina si apoi iei link-ul

    RăspundețiȘtergere
  14. Am urmat pas cu pas instructiulile tale. A iesit un sablon super cu 3 coloane, care a functionat de 2 luni incoace. Azi m-am trezit cu bara laterala dreapta ca a cazut sub coloana principala de postari. Te rog sa-mi spui ce sa fac sa o aduc la loc

    RăspundețiȘtergere
  15. Mi-am facut si eu azi blogul cu 3 coloane. :)
    Dar cand intru pe una din postari imi dispare coloana din dreapta si nu-mi mai apar nici comentariile, editarea...:(
    Ce sa fac? Help!

    RăspundețiȘtergere
  16. Miha, daca ai urmat acest tutorial ar trebui sa nu ai aceasta problema.
    E posibil sa fie alta problema.
    Citeste acest articol, poate gasesti aici rezolvare.

    RăspundețiȘtergere
  17. Salut! Am o problema la care nu reusesc sa-i dau de cap..in sidebar am si titlul si textul pe aliniat stanga, dar as vrea ca titlul (sidebar title) sa fie central. Am incercat in cadrul gadget-ului sa il centrez dar nu am posibilitatea decat la text. Poate ma ajuta cineva sa rezolv problema..
    mersi

    RăspundețiȘtergere
  18. Am urmat aproape toate instructiunile tale, dar la un moment dat, m-am pierdut... Blogul arata naspa... Ajuta-ma te rog...
    Mersi mult.
    http://romaniinspania-gabriela.blogspot.com/
    Arunca te rog o privire si la asta:
    http://despredragoste2009.blogspot.com/

    RăspundețiȘtergere
  19. Gabriela sablonul pe care l-ai modificat este bazat pe poze pt colturi si necesita si alte modificari.
    Iti sugerez sa incepi cu Minima si apoi poti sa arunci un ochi si aici

    RăspundețiȘtergere
  20. Scuze, nu inteleg prea bine... Adica, s-o iau iarasi pas cu pas? De la inceput? Sau cum?...
    Scuze...

    RăspundețiȘtergere
  21. Da Gabriela, de la inceput! Eu asa cred ca e mai bine!

    RăspundețiȘtergere
  22. Cum poate fi setata o postare ca ea sa nu fie afisata in totalitate si sa fie un buton pentru extinderea ei ? Acest lucru fiind util mai ales la postarile de intindere mare. Multumesc anticipat pentru raspuns.

    RăspundețiȘtergere
  23. Salut
    Am sablon Stretch Denim cu destule postari, as putea sa trec la 3 coloane fara sa pierd postarile ? Pratic sa ramana blogul la fel doar ca mai apare o coloana sa pot pune widget ce vreau, asta pentru ca in coloana laterala nu mai pot sa le schimb locul cum vreau, din cauza ca sunt prea multe elem adaugate ? candva mergea sa le schimb intre ele , acum nu se poate

    RăspundețiȘtergere
  24. Postarile nu sunt afectate. Si daca sunt prea multe elemente nu crezi ca ar trebui sa mai renunti la cele nefolositoare? :)

    RăspundețiȘtergere
  25. sunt multe 15 ? pai imi cam imi trebuiesc si in alta ordine de idei chiar acum am incercat pe un alt blog test unde am 2 elemente in coloana laterala si nu se schimba intre ele ~x( Unde-i buba ?
    Iar daca trec la 3 coloane cum fac ca am alt sablon, nu am minima

    RăspundețiȘtergere
  26. :)) chestie de browser... in mozilla nu mai vrea , inainte se putea schimba, am incercat in IE, acum mi-a venit ideea, merge
    Totusi e mai frumos cu 3 coloane, as putea daca am alt sablon sa fac si pe a treia ?

    RăspundețiȘtergere
  27. am reusit sa fac si eu cu trei coloane,arata super, apare o problema : la zoom out, sidebar din dreapta cade sub coloana centrala
    cum se poate rezolva ?

    RăspundețiȘtergere
  28. Florian, incearca sa fii la zi cu versiunea de Firefox si trebuie sa mearga.
    In legatura cu al doilea sidebar: merge si pe celelalte sablon default, doar ca difera putin codurile

    Denisa la ce zoom out te referi?

    RăspundețiȘtergere
  29. ma refer la micsorarea paginii,(ctrl and -)

    RăspundețiȘtergere
  30. Nu au legatura una cu alta. Zoom-ul il faci din browser si nu din codul sablonului.

    RăspundețiȘtergere
  31. Dar ai putea sa pui si adresa blogului. Poate e gresit ceva.

    RăspundețiȘtergere
  32. mie nu-mi trebuie sa micsorez la vizualizare, gandeam pentru vizitatori, daca cineva ar face o micsorare, ar trebui sa navigheze dupa coloana din dreapta. Adevarul este ca am umblat la latimea celor 3 coloane, nu l-am vrut in final prea lat, poate nu s-a pastrat o distanta optima intre coloane
    O sa mai incerc, este in lucru
    Multumesc

    RăspundețiȘtergere
  33. Dani,
    dupa sidebar din dreapta nu trebuie margine margin-right: 10px;
    eu asa am facut, am scoso si astfel am dus centrala in latime spre dreapa, altfel nu-mi iesea sa fie sidebar sub header aliniat in dreapta

    RăspundețiȘtergere
  34. Cu adevarat de ajutor blogul tau!!! Multumiri! Nici nu mai stiu cate am reusit sa fac cu "blogutzul" meu (prescolariimei.blogspot.com)de cand te-am descoperit! Am modificat sablonul ales initial de mine, de la doua la trei coloane, dupa explicatiile tale. Bine, am mai jonglat putin cu pixelii, dar ideea e ca datorita tutorialului mura-n-gura am reusit!!! Ura! Deja am devenit mai pretentioasa cu aspectul si mi-e teama sa nu neglijez continutul. Sper sa nu. Mai am o "dambla" cu sablonul, dupa care ma linistesc...cel putin pentru o vreme. Mi-ar prinde bine un ajutor din partea ta, dar nu stiu cum sa explic mai concret ce vreau. Am un exemplu "viu" un blog al carui aspect imi place (chiar ma obsedeaza). Ma refer la felul de afisare a postarilor, incadrarea lor in borduri, fundalul acestora...Asta e...ii scriu adresa desi nu vreau sa fiu acuzata de reclama...pentru mine e doar pentru aspect...http://danyrolux.blogspot.com/
    Scuze si multumiri inca o data!

    RăspundețiȘtergere
  35. Am nevoie de un tabel pentru pagina mea ma poti ajuta? pls!:)

    RăspundețiȘtergere
  36. intrebarea mea este daca se poate face un centerbar...si doua spatii in stanga si in dreapta de scris. Astept raspuns. Ms

    RăspundețiȘtergere
  37. Am urmat pasii si am reusit sa fac 3 coloane....problema este ca nu stiu cum sa maresc fundalul colorat astfel sa cuprinda inclusiv sidebarul din dreapta. Ma poti ajuta? Te rog!
    http://testsimi.blogspot.com/

    Multumesc anticipat!

    RăspundețiȘtergere
  38. Am sablonul "AnimeNarutoUniqx". Sablonul are 3 coloane (coloana postari - sidebar - sidebar-secondary). Cum as putea muta unul dintre sidebar-uri in stanga coloanei de postare? Multumesc anticipat.

    RăspundețiȘtergere