Creare un template a 3 colonne per Blogger

Da quando Blogger utilizza il nuovo template in XML, quasi tutti i template pubblicati sono a 3 colonne. Avere una colonna in più permette di gestire meglio lo spazio a disposizione e in particolare si rivela utile per chi vuole inserire una colonna verticale di banner pubblicitari. Per prima cosa vi raccomando di eseguire il backup del template di Blogger, e di leggere l'articolo su come cambiare la larghezza del template: per aggiungere un'ulteriore colonna, avremo bisogno di più spazio.

Dopo aver allargato la larghezza del template come illustrato nel precedente articolo, mantenete la larghezza del main-wrapper a 410px e cercate la seguente porzione di codice:

#sidebar-wrapper {
  width: 220px;
  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 */
}

Copiatela e subito sotto incollatela cambiando la prima riga nel seguente modo:

#new-sidebar-wrapper {
  width: 290px;
  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 */
}

In questo modo abbiamo creato un nuovo "identificatore" di area che si chiama new-sidebar-wrapper. La larghezza è 290 perchè il nostro obiettivo (come sempre rimando al precedente articolo) è arrivare a 920 pixel: 410px + 220 + 290px = 920px (più 30 di margine fanno 950, la larghezza del nostro template di prova). Adesso cerchiamo la seguente porzione di codice:

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='LinkList1' locked='false' title='COLLEGAMENTI' type='LinkList'/>
        <b:widget id='Text1' locked='false' title='TESTO' type='Text'/>
     </b:section>
</div>

Le righe evidenziate in blu potrebbero essere diverse a seconda del contenuto della colonna che già avete nel template. Fondamentalmente dovete cercare l'area che comincia con <div id='sidebar-wrapper'>. Subito prima delle righe sopra, incollate la seguente porzione di codice:

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

Salvate le modifiche effettuate e andate in Layout->Elementi pagina. Adesso dovreste vedere la terza colonna: aggiungete degli elementi e salvate il template. Visualizzate il blog e il gioco è fatto:

Per avere entrambe le colonne laterali della stessa larghezza (come nell'immagine sopra), impostate in entrambi i wrapper la width (larghezza) a 255 px:

#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 */
}

e

#new-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 */
}

mentre il main-wrapper sarà il seguente:

#main-wrapper {
  width: 410px;
  float: $startSide;
  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 */
  }

e l'outer-wrapper:

#outer-wrapper {
  width: 950px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Spero di essere stato abbastanza chiaro. In futuro pubblicherò altri articoli sulla gestione delle colonne. Se avete qualche dubbio o non vi funziona qualcosa, lasciatemi un commento.

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!