Cum adaug un footer cu 3 coloane

Daca ti-ai creat deja blogul si ai ales un template care nu disupune de un footer in care poti adauga widgeturi, atunci urmeaza pasii de mai jos pentru a adauga un astfel de footer blogului tau!

1. Te conectezi la Contul de Blogger, selectezi Design si apoi Editati HTML;
2. Pentru orice eventualitate, fa o copie de siguranta a blogului;
3. Cauta (CTRL + F) in sablonul blogului, linia unde este declarat footerul actual al blogului. Ar trebui sa gasesti ceva asemanator:
   

   1	<div id='footer'> ... </div>

   Daca ai continut (text, imagini, etc) in footer, codul de mai sus ar trebui sa fie mai lung. Elementul care inchide footerul este </div>;
   
4. Copiaza codul de mai jos si apoi adauga-l imediat dupa </div> - ul care inchide footerul:
   
   

   01	<!-- Footer cu 3 coloane (www.Blog-Help.net) -->

   02	<div id='new-footer-wrapper'>

   03	<div id='column1-wrapper'>

   04	<b:section class='new-footer' id='new-footer1' preferred='yes'/>

   05

   </div>

   06

   07	<div id='column2-wrapper'>

   08	<b:section class='new-footer' id='new-footer2' preferred='yes'/>

   09

   </div>

   10

   11	<div id='column3-wrapper'>

   12	<b:section class='new-footer' id='new-footer3' preferred='yes'/>

   13

   </div>

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

   15

   </div>

   16	<!-- Footer cu 3 coloane (www.Blog-Help.net) -->

5. Copiaza codul de mai jos si adauga-l in sectiunea CSS a blogului, inainte de ]]></b:skin>;
   

   01	/* CSS Footer cu 3 coloane (www.Blog-Help.net) */

   02	#new-footer-wrapper {background: #fff; margin: 0 auto;width:98%; padding: 0 10px  10px 0;}

   03

   04	#column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}

   05

   06	.new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}

   07

   08	.new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}

   09

   10	.new-footer .widget-content { padding: 0px 5px 5px 5px; }

   11

   12	.new-footer ul { list-style-type:square; margin-left:15px; }

   13	/* CSS Footer cu 3 coloane (www.Blog-Help.net) */

6. Salveaza si apoi apasa pe Elemente de pagina, unde ar trebui sa vezi cele 3 containere ale footerului;
   
   
7. Acum poti adauga ce widgeturi vrei in oricare din cele 3 coloane ale footerului

Prin adaugarea noului footer, cu cel "vechi" nu se va intampla nimic, cel nou, o sa fie pozitionat sub cel vechi. Daca doresti poti sa-l inlocuiesti pe cel vechi cu cel nou.

Daca nu te descurci lasa un comentariu pentru a te ajuta :)