footer a tre colonne

Poiché sull'argomento già esiste un magnifico tutorial a opera della bloggerbuster Amanda, ci limiteremo a tradurlo qui di seguito, riportando i quattro passaggi necessari per ottenere un blog dal piè di pagina a tre colonne, proprio come in bpb™.

1. Eseguire una copia di sicurezza del template
Prima di apportare qualunque modifica all'aspetto del vostro blog, è fondamentale fare una copia di backup del template esistente. Così se fate qualche errore, oppure il risultato non vi soddisfa, potrete facilmente ritornare al vecchio design: via bacheca > layout > modifica html > scarica modello completo è possibile salvare sul proprio pc un file xml del template in uso.

2. Rimuovere tutti i widget dal footer
E' opportuno spostare (temporaneamente) tutti i widget presenti nella sezione footer del vostro blog in un'altra sezione (ad es. la sidebar). Ciò facilita le operazioni di modifica del codice e impedisce la perdita dei widget durante la modifica stessa. Una volta terminata la procedura in quattro punti, potrete nuovamente traslocare i widget nel footer.

3. Aggiungere il codice al footer del template
Via bacheca > layout > modifica html (senza espandere i modelli widget) individuate [ctrl+f] questa sezione del codice:

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

nota bene: questa sezione potrebbe avere una sintassi lievemente differente da quella qui riportata, ad esempio "footer-wrap" oppure "footer". Nel caso poi dei template della serie Rounders, si noterà che esistono due sezioni div. Ad ogni modo, ciò che qui serve è di sostituire la sezione evidenziata in rosso.

Sostituite la parte evidenziata in rosso con questo codice:

<div id='footer-column-container'>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>

<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>

A questo punto è una buona idea salvare il template, prima di passare alla fase finale della procedura, che consiste nell'aggiungere uno stile al footer modificato.

4. Aggiungere uno stile al footer
Via bacheca > layout > modifica html (senza espandere i modelli widget) individuate [ctrl+f] la tag di chiusura </b:skin> e subito prima incollate questo:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Fatto. Via bacheca > layout si vedranno le tre nuove colonne create nel footer del blog, alle quali sarà possible aggiungere i widget precedentemente spostati altrove.

Si noterà che è stata aggiunta una linea orizzontale alla sezione footer, allo scopo di assicurare una distinzione grafica tra il contenuto del footer e quello della sezione superiore. E' possibile modificarne il colore, intervenendo sul valore evidenziato in neretto:

<hr align='center' color='#5d5d54' width='90%'/>

bloggerperbabbei™ - 2009
via BloggerBuster