Per impostazione predefinita, Minima, il modello originale di Blogger, posiziona i post del tuo blog uno sotto l’altro, ma puoi modificare questo layout in modo che le voci vengano visualizzate una accanto all’altra. Con un posizionamento orizzontale, puoi risparmiare spazio prezioso sulla tua pagina e rendere conveniente per i visitatori trovare gli articoli perché non dovranno scorrere continuamente verso il basso. Blogger ti dà accesso al codice HTML del tuo modello, da cui puoi modificare la larghezza della pagina e regolare i post del blog per creare un layout a tre colonne che faccia apparire le tue voci una accanto all’altra.

Modifica della larghezza della pagina

1

Accedi al tuo account Blogger e fai clic sul menu a discesa accanto al nome del tuo blog. Seleziona l’opzione “Modello”, quindi fai clic sul pulsante “Modifica HTML” per visualizzare il codice del tuo blog.

2

Individua la regola “# wrapper esterno” nel codice, quindi modifica il valore della larghezza esistente in 940 pixel, come nell’esempio seguente:

wrapper esterno {larghezza: 940 px; }

Questa azione espande il corpo del tuo blog in modo che possa ospitare i post affiancati.

3

Trova la regola “# main-wrapper” e inserisci “620px” dopo la larghezza, come segue:

wrapper principale {larghezza: 620 px; }

4

Individua le regole “# header-wrapper” e “#footer”, quindi elimina “width: 660px;” parte in ogni codice. Inoltre, trova “#header .description” ed elimina “max-width: 700px;” iscrizione.

5

Trova la regola “# blog-pager” e digita “width: 600px; clear: both;” come questo:

blog-pager {larghezza: 600px; chiaro: entrambi; }

Il cercapersone del blog presenta collegamenti alla home page e ai nuovi e vecchi post e questo codice fa in modo che copra sempre la larghezza di tutte le colonne dei post sulle pagine.

6

Fare clic sul pulsante “Salva modello”.

Modifica dei post del blog

1

Fai clic sulla casella “Espandi modelli widget” nella pagina Modifica HTML per visualizzare tutto il codice del tuo blog. Trova il seguente blocco di codice e copialo:

2

Individua questa riga di codice:

Posiziona il cursore alla fine della riga del codice, quindi incolla il codice copiato in modo che venga visualizzato subito dopo.

3

Trova l’elemento finale “” e inserisci il seguente codice dopo di esso:

.post {larghezza: 290px; margin-right: 20px; float: sinistra; overflow: nascosto;}

4

Fare clic sul pulsante “Salva modello”.