Come ho allargato il template del blog

Avrei voluto intitolare il post "Come allargare il template in un blog" ma visto che sto usando un tema che non fa parte di quelli che offre Blogger non so se le operazioni da compiere siano sempre le stesse. Intanto parte raccontandovi come ho allargato questo template, magari ne ricavere informazioni utili per mettere le mani sul vostro.

Iniziamo con la parola chiave che in questo caso è il termine width che indica la larghezza e che dovremo cercare nel nostro tema del blog. Certo con Blogger anche i meno esperti possono cimentarsi in varie prove (vi basta cercare nella pagina il termine e iniziare con vari tentativi) evitando di salvare il lavoro finché non si hanno raggiunto i risultati sperati.

In rosso cosa cliccare su Blogger dai vari tab che sono posti in alto a sinistra:

Post | Impostazioni | Layout | Guadagna | Visualizza blog
Elementi pagina | Caratteri e colori| Modifica HTML | Scegli nuovo modello

Ovviamente la seconda riga comparirà dopo che avrete cliccato prima sul tab Layout.

Ho iniziato la ricerca che si è conclusa dopo pochi secondi dopo aver trovato l'indicazione
#page
che mi faceva intuire che si parlava della pagina intera. Come se non bastasse ho pure trovato il valore width di cui vi parlavo prima, con una misura piuttosto grande (760px) cosa che mi ha fatto capire che si parlava dell'intera larghezza del blog. Tanto per dirla tutta solitamente i blog hanno larghezze che partono da 600px (più o meno), quindi se trovate valori come 450-500 potete intuire che non si parla della larghezza dell'intera pagina ma soltanto di quella della colonna più grande.

#page {
background: white;
text-align: left;
margin: 0 auto;
padding: 20px 0 10px;
position: relative;
/* The entire template's width is set in this class. */
width: 900px;
/*_width: 900px;*/ /* IE hack */
border: 1px solid #ddd;
border-top: none;
}

Ovviamente al posto di 760 mi è bastato inserire 900. Sono poi passato alla seconda fase della modifica, ovvero dare delle dimensioni alla colonna più larga del blog. Poco in basso ho trovato:

#primary {
width: 600px;
/*_width: 600px;*/ /* IE Hack */
float: left;
padding: 20px 0 20px;
margin: 0 30px 0 30px;
/*_margin: 0 20px 0 15px;*/ /* IE Hack */
display: inline;
}

Qui visto che volevo la colonna principale della larghezza di 600 pixel ho subito inserito il valore al solito posto dopo width e salvato tutto.
Se avete un template a due colonne è probabile che dopo troverete anche un #secondary, che giustamente vi permette di modificare la colonna più stretta del vostro template, cosa che comunque io non ho toccato.

A questo punto il gioco dovrebbe essere fatto. Uso il condizionale perché ovviamente il codice css varia da blog a blog, ma in linea di massima basta seguire le indicazioni generali all'inizio del post per trovare dove andare a mettere le mani.

Consiglio: Scarica sempre il modello completo del tema del blog prima di iniziare a metterci le mani, nel caso di salvataggi avendo fatto danni irreparabili possiamo sempre ripristinare tutto. Trovate l'opzione sempre sulla sezione Layout > Modifica HTML poco sopra la casella di codice.

Visto che ci sono vi indico anche un paio di link utili per allargare i vostri blog, qui il collegamento al famoso "Risorse per Blogspot", sito che mi ha dato una mano più di qualche volta, qui invece il link diretto alla ricerca su Google, niente di più veloce per iniziare ad informarsi su come allargare il vostro template.