Come creare un footer a tre colonne per il tuo blog ~ Template x blogger

Sicuramente ti sarà capitato di entrare in qualche blog (tipo template x blogger) e vedere un footer, o piè di pagina per i patrioti, a tre colonne. Come ti è sembrato? A me bellissimo, infatti...
Questo widget, se vogliamo chiamarlo così, diventa utiliisimo a quei blooger che hanno diversi widget nelle sidebar che rendono la navigazione poco intuitiva; avere delle sidebar troppo "affollate" può rovinare tutto il lavoro di scrittura dei post.
Devi sapere che la maggior parte degli utenti, inconsciamente, danno subito una valutazione al sito in cui entrano dalla grafica e dal layout e se non piace stai pur certo che dei tuoi contenuti nemmeno si interessano e probabilmente non li vedrai mai più.
In questo caso il detto "l'abito non fa il monaco" è assolutamente sbagliato!

Vediamo quindi come fare questa modifica al template e aggiungere questo widget, per poi inserirci tutti i gadget che vogliamo.

Come fare:

1- Vai su Layout --> Modifica HTML, espendi i modelli widget e salva il tuo attuale template.

2- Cerca ]]></b:skin> e incolla questo codice subito prima

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;

3- Ora cerca <div id='credits'> e incolla appena prima questo

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

4- Salva

P:S: Non in tutti i blog c'è il tag <div id='credits'>. Se non lo trovi e non sai quale siail tag sostitutivo scrivi nei commenti che ti aiuto io.

Ora si potrebbero già inserire i gadget ma... vogliamo renderlo perfetto anche nei colori? Vediamo come personalizzarlo:

5- Torna dove hai inserito la prima porzione di codice e modifica le parti colorate;

background:#333434; Ovviamente cambia il background del widget
width: 960px; Questa è la larghezza. modificala in base a quella del tuo template
background:#fff; e width: 32%; si riferiscono alle singole colonne
color:#0084ce; Questo è il colore del titolo del gadget
font: bold 14px Arial, Tahoma, Verdana; modifica la grandezza e il font del testo
border-bottom:3px solid #0084ce; modifica la linea che divide il titolo dal gadget vero e proprio
border-bottom: 1px dotted #ccc; questo modifica la misura, lo stile e il colore del bordo che appare sotto ai link.