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!