Cum sa adaugi 3 coloane in footer pe Blogger

Dupa cum stiti blogurile de pe Blogger sunt prevazute cu o singura coloana pentru footer, exceptie facand doar sabloanele care sunt modificate deja.
3 coloane in footer-ul sablonului aduce un plus de flexibilitate  in adaugarea continutului, mai ales daca aveti widget-uri care nu au o latime prea mare.

Acest truc este gasit aici (Create Three Column Footer in Blogger)


Aceasta metoda creeaza 3 noi coloane in footer lasand totusi intacta coloana pe care o aveti deja in footer. Din pacate gadget-urile deja existente vor fi afectate, dar modalitatea de a le pastra este urmatoarea:
Inainte de a umbla la html-ul sablonului duceti-va la Aspect --> Elemente de pagina si mutati toate gadgeturile din footer in sidebar, sau sub postare. Asta pana cand vom modifica footer-ul, apoi le veti putea muta din nou la loc.

Acum vom trece la modificarea sablonului. Urmati calea Aspect --> Editati Html si primul lucru pe care il veti face este sa salvati o copie a sablonului, in calculatorul vostru.
Lasati casuta pentru extinterea sablonului NEBIFATA.

Cautati urmatorul cod:

]]></b:skin>

si inainte de el copiati codul de mai jos.

#footer-column-container {
clear:both;
}


.footer-column {
padding: 10px;
}

Al doilea pas consta in gasirea urmatorului grup de coduri:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Codul va arata asa doar daca ati mutat gadget-urile din footer, sau daca nu aveati oricum nici un gadget adaugat.
Acum pentru a termina treaba inlocuiti aceasta linie:

<b:section class='footer' id='footer'/>

cu acest cod:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Previzualizati pentru a vedea daca va da vreo eroare si apoi salvati. Duceti-va la Elemente de pagina si veti vedea ca cele 3 coloane s-au format, nemaitrebuind decat adaugarea de continut in ele. Observati ca a ramas si coloana originala. In ea puteti la fel sa adaugati continut, sau puteti sa o lasati goala.

Daca vreti sa personalizati footer-ul nu trbuie decat sa adaugati definitii dupa acest cod:

#footer-column-container {

dar daca folositi si footer-ul original atunci trebuie sa il personalizati si pe acesta.