Aggiungere nuove sezioni al template di Blogger

Ho spiegato in precedenti articoli come allargare il template di Blogger per aggiungere nuove colonne, e a gestirne la distanza e la posizione. Ho visto che molti si sono cimentati in queste modifiche, e la maggior parte con successo. Adesso vedremo come aggiungere nuove aree al template di Blogger, ed esattamente come aggiungere una sezione sopra e sotto le colonne laterali, per avere un layout così:

Le nuove sezioni permetteranno di aggiungere elementi che occupano più spazio di quello presente in una colonna, come ad esempio gli annunci di AdSense che anch'io visualizzo in alto a destra nel template.

Se vi siete già cimentati nelle precedenti modifiche, fare questa sarà cosa di pochi minuti, altrimenti consiglio di leggere i precedenti articoli per avere maggiori chiarimenti, perchè parto dal presupposto che li abbiate già letti. Fondamentale, come sempre, è di fare prima il backup del template di Blogger, per poter tornare indietro nel caso di disastri.

L'idea di base è di aggiungere due nuove colonne troppo larghe per essere visualizzate di fianco alle altre e quindi costringendole a mettersi sopra e sotto le altre già presenti. Per aiutarsi nella modifica del codice, consiglio di usare Notepad++, di cui ho parlato in passato.

Dalla vostra bacheca, andate in Layout->Modifica HTML, selezionate "Espandi i modelli widget" e cercate la porzione di codice che comincia con :

#sidebar-wrapper {

Prendendo come esempio il post che ho fatto su come aggiungere la terza colonna, troveremo:

#sidebar-wrapper {
  width: 255px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Copiate e incollate le righe subito sotto, modificando le parti in rosso:

#top-sidebar-wrapper {
  width: 510px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

510 indica la larghezza della colonna che aggiungeremo sopra le altre due, e deve corrispondere alla somma delle due colonne laterali già presenti (partendo dal presupposto che siano entrambe di 255 pixel, la somma fa 510).

Sotto ancora incollate la stessa porzione di codice, modificando le parti in rosso:

#bottom-sidebar-wrapper {
  width: 510px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

A questo punto cercate nel template le due porzioni di codice che cominciano con:

<div id='sidebar-wrapper'>

e

<div id='new-sidebar-wrapper'>

Che indicano le due colonne laterali nel blog (i nomi ovviamente potrebbero essere leggermente diversi, io ho usato quelli che otterremmo seguendo le istruzioni del mio post su come aggiungere la terza colonna). Indipendentemente di quale sia prima e quale sia dopo, prima delle due incollate queste righe:

<div id='top-sidebar-wrapper'>
  <b:section class='top-sidebar' id='top-sidebar' preferred='yes'>
  </b:section>
</div>

e, dopo delle due, incollate:

<div id='bottom-sidebar-wrapper'>
  <b:section class='bottom-sidebar' id='bottom-sidebar' preferred='yes'>
  </b:section>
</div>

A questo punto potete salvare il template e, in Layout->Elementi pagina, potete già vedere le nuove sezioni dove sarà possibile aggiungere nuovi elementi. Con queste nuove sezioni, l'aspetto di un blog ne guadagna moltissimo. Una delle due sezioni inoltre è perfetta per aggiungere il widget Blogums con la visualizzazione dinamica delle vostre categorie.

Ho testato queste modifiche con Firefox 3, Internet Explorer 8 e Chrome, senza problemi su nessuno dei tre.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!