Website XXL

Cum adaug un footer cu 3 coloane

Cum adaug un footer cu 3 coloane

colum footer

Daca ti-ai creat deja blogul si ai ales un template care nu dispune 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:
    < class=”brush: xml; toolbar: false;”><div id=’footer’> … </div></>
  4. Daca ai continut (text, imagini, etc) in footer, codul de mai sus ar trebui sa fie mai lung. Elementul care inchide footerul este </div>;
  5. Copiaza codul de mai jos si apoi adauga-l imediat dupa </div> – ul care inchide footerul:
    < class=”brush: xml; auto-links: false;”><!– Footer cu 3 coloane (www.websitexxl.ro) –>
    <div id=’new-footer-wrapper’>
    <div id=’column1-wrapper’>
    <b:section class=’new-footer’ id=’new-footer1′ preferred=’yes’/>
    </div><div id=’column2-wrapper’>
    <b:section class=’new-footer’ id=’new-footer2′ preferred=’yes’/>
    </div><div id=’column3-wrapper’>
    <b:section class=’new-footer’ id=’new-footer3′ preferred=’yes’/>
    </div>
    <div style=’clear: both;’/>
    </div>
    <!– Footer cu 3 coloane (www.websitexxl.ro) –></>
  6. Copiaza codul de mai jos si adauga-l in sectiunea CSS a blogului, inainte de ]]></b:skin>;
    < class=”brush: xml; auto-links: false;”>/* CSS Footer cu 3 coloane (www.websitexxl.ro) */
    #new-footer-wrapper background: #fff; margin: 0 auto;width:98%; padding: 0 10px 10px 0;#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;.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;.new-footer .widget margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;.new-footer .widget-content padding: 0px 5px 5px 5px;.new-footer ul list-style-type:square; margin-left:15px;
    /* CSS Footer cu 3 coloane (www.websitexxl.ro) */</>
  7. Salveaza si apoi apasa pe Elemente de pagina, unde ar trebui sa vezi cele 3 containere ale footerului;footer cu 3 coloane
  8. 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 :)

Leave a Reply