Blogger cu 3 coloane

Pt ca sidebar-ul incepuse sa mi se aglomereze ingrozitor de mult si pt ca nu am inteles de ce Bloggerul nu ofera si un template cu 3 coloane, m-am hotarat sa incerc un mic "hack". Asa ca uitandu-ma cu jind la spatiul gol si nefolosit din stanga, mi-am suflecat manecile si mi-am bagat nasul in codul paginii. Rezultatul il puteti si voi observa, fiind o reusita :D

M-am gandit ca informatiile ar putea fi utile multora care folosesc Blogger si se lovesc de aceeasi problema a lipsei spatiului util, asa ca aveti mai jos un mic tutorial.

Nu-mi asum responsabilitatea pt eventualele probleme care pot aparea, asa ca sa nu va aud ca v-am busit blogul ! :D Ar fi bine sa va faceti un back-up inainte de a va apuca sa faceti modificarile.
Ar trebui sa aveti cateva cunostiinte CSS cand va apucati de treaba, dar nu este obligatoriu, pasii necesari fiind destul de simplu de urmat.

1. Logati-va pe Blogger si mergeti la Layout > Edit HTML


2. Cautati sectiunea unde sunt definite wrapper-ele. Aceasta arata cam asa:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}

- Va trebui sa definim wrapper-ul pt noua coloana. Copiati dupa cele 3 de mai sus codul pt noua coloana:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

3. Acum trebuie sa facem modificarile in body pt noua coloana. Cautati sectiunea de div-uri care arata asa:
*Nota- in loc de caracterul "@" va fi caracterul "<". A trebuit sa fac aceasta inlocuire pt ca altfel nu puteam sa postez codul.

@div id='main-wrapper'>
@b:section class='main' id='main' showaddelement='no'>
@b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
@/b:section>
@/div>

@div id='sidebar-wrapper'>
@b:section class='sidebar' id='sidebar' preferred='yes'>
@b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
@/b:section>

- Adaugati deasupra celor doua codul pt noul sidebar:
*Nota- dupa ce copiati codul de mai jos in HTML, inlocuiti caracterul "@" cu caracterul "<" !!!

@div id='newsidebar-wrapper'>
@b:section class='sidebar' id='newsidebar' preferred='yes'>
@b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
@/b:section>
@/div>

- Dati Save Template si acum daca mergeti la Template->Page Elements , Layout-ul Template-ului vostru ar trebui sa va permita sa adaugati elemente si in coloana din stanga. Cam asa ar trebui sa arate:


- Daca doriti sa redimensionati cele 3 coloane, va puteti juca putin cu definirea numarului de pixeli alocat pt fiecare, in sectiunea de wrappere de la punctul 2.
Eu folosesc : outer-wrapper: 820 , main-wrapper: 410 , sidebar-wrapper: 180 , newsidebar-wrapper: 180. Aveti grija ca dimensiunea pt outer-wrapper sa fie cu 20-30 pixeli mai mare ca main+sidebar+newsidebar.
Pt a mari si caseta cu titlul (header-ul), modificati pixelii la #header-wrapper. Eu folosesc 830 pt acesta. La fel si pt footer.
Daca nu setati cum trebuie aceste valori, este posibil ca elementele sa iasa din pagina sau sa fie afisate aiurea. Sfatul meu este sa le lasati pe cele default sau sa le folositi pe ale mele (ale mele sunt pt o vizualizare corecta pana la o rezolutie minima de 1024x768).

Cam asta este tot, sper ca v-am fost de ajutor. Bucurati-va de noul spatiu. Daca va simtiti generosi, nu uitati ca accept donatii de cafea, Pepsi si tigari. Assos Gold fumez :D

Si sa va delectez si cu o poza izvorata din subconstientul meu, care habar nu am ce reprezinta, dar simt eu ca are legatura cu postul asta :D