Come aggiungere tre nuove colonne nella parte bassa del modello di un blog su Blogger.

Nel momento in cui si inizia un blog, specialmente se è il primo, non si sta troppo a considerare il modello tanta è l’eccitazione di cominciare questa avventura. Successivamente ci si rende conto che un avere avuto un modello diverso ci avrebbe facilitato il compito.

I widget aumentano, gli annunci pubblicitari da inserire pure e lo spazio è sempre lo stesso. Cambiare il modello non è poi più tanto semplice perché a parte i problemi con i vari widget quando si varia la larghezza della zona in cui è situato l’articolo questo pone dei problemi con immagini e video che si sono già postati.

Questo tutorial è dedicato a coloro che hanno un modello semplice come il mio e che vogliono aumentare lo spazio di inserimento per i widget ma nello stesso tempo non vogliono cambiare template perché la ritengono un’operazione troppo complessa e dal risultato incerto.

Per aumentare lo spazio del blog vediamo come si possono aggiungere tre nuove colonne nella parte bassa del layout.

Premetto che ci sono due possibilità

1. Si ha un modello in cui non è prevista la parte bassa del modello (Blogger Footer)
2. Si ha un modello in cui invece è già presente il Blogger Footer

Per verificare la cosa basta andare su Personalizza > Layout > Elementi pagina e guardare come si presenta graficamente il template. Se è presente Aggiungi un gadget significa che esiste il Blogger Footer, se non è presente vuol dire che non c’è

 

 

Nel modello di questo blog il Blogger Footer non esisteva. Descriverò il procedimento in due passaggi mentre in un prossimo articolo mi occuperò di eventuali personalizzazioni. Prima di iniziare in ogni caso andare su Layout > Modifica HTML e scaricare il modello completo per ragioni di sicurezza.

Primo passo – Questo vale solo per i modelli che non hanno il blogger footer, quelli che ce l’hanno possono passare al Secondo passo.

Andare in Layout > Modifica HTML e cercare la seguente riga di codice (è un commento che indica la fine del modello vero e proprio)

</div></div> <!-- end outer-wrapper -–>

Per cercare la riga pigiare F3 oppure Ctrl+F. Dopo questa riga ci sono solo eventuali script per statistiche come Google Analytics oppure script aggiunti per funzionalità particolari come quello fatto qualche giorno fa per le emoticon animate nei commenti.

Inserire prima della riga il seguente codice

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

come mostrato nello screenshot 

Salvare il modello e andare su Layout > Elementi pagina. Vedrete che nella parte finale sarà comparso un elemento Aggiungi un gadget

 

Una colonna l’abbiamo quindi aggiunta , adesso cerchiamo di moltiplicarla per tre!

Secondo passo – Coloro che non avevano la parte finale del modello e l’hanno aggiunta nel Primo passo ovviamente non hanno nessun widget in quella zona. Quelli che invece quella parte ce l’avevano già e hanno saltato il primo punto devono spostare eventuali widget che si trovano nella parte finale del modello. Basterà inserirli momentaneamente in una sidebar laterale per poi riposizionarli alla fine del processo di modifica del template.

Pigiando F3 o Ctrl+F cercare adesso la seguente riga di codice

]]></b:skin>

e immediatamente sopra inserire il seguente codice

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

come mostrato nel seguente screenshot

Adesso, con lo stesso sistema, cercate quest’altra parte di codice

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

quindi selezionatela, cancellatela e sostituitela con quest’altro codice

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

come evidenziato in quest’altro screenshot

Salvate il modello. In linea di massima dovrebbe andar bene per quasi tutti i template. Occorrerà fare delle personalizzazioni per quanto riguarda la larghezza, i margini e altri particolari. Intanto andate su Layout > Elementi pagina e cominciate a spostare qualche widget nella parte bassa che avete appena creato.  

Per esempio fate un lavoro di questo tipo

e salvate nuovamente il modello. Ecco come si presenta la parte finale del mio blog dopo tutte queste operazioni

 

Per oggi basta così! Nei prossimi giorni penseremo alle personalizzazioni. Fonte |

Aggiornamento: Per la personalizzazione consulta questo articolo.