Ho deciso, nonostante la mia noncuranza (ma soprattutto ignoranza) riguardo ai termini specifici dell'uso di questa scrittura chiamata HTML, di scrivere un post per quelli che cercano di individuare la terza colonna, ovvero la seconda sidebar, in un blog su blogspot.
Questo perché ho notato che a scrivere "blogspot tre colonne" sul motore di ricerca Google sono la seconda immeritatamente, dato che tempo fa avevo scritto semplicemente un post nel quale esprimevo tutta la mia contentezza e soddisfazione di aver raggiunto simile risultato. E non posso deludere così tante persone con uno schifoso post passato (Stelli compresa).
Allora iniziamo...
.............................
Mmmmmmmmmmmmmm..............
(Premetto che tutto il seguito di questo post trae spunto dal mio layout predefinito, che si chiama Thisaway. Altri modelli potrebbero non corrispondere esattamente con quanto trattatonon tutti i layout sono così facili da modificare).
Consiglio: Prima di iniziare a lavorare, vi consiglio di salvare una copia del vostro attuale HTML in modo che, in caso di pasticci, non vada perso almeno il lavoro precedente.
- Effettuato l'accesso nel vostro blog, cliccate su Modello → Modifica HTML. Non c'è bisogno di spuntare l'opzione "Espandi i modelli widget".
- Innanzitutto per aggiungere la terza colonna è necessario predisporre in termini di misure la pagina, in modo che possa contenere un'ulteriore sidebar; in pratica, aumentare la larghezza dell'outer-wrapper. Trovate questa sezione nella prima parte dell'html, quella con i titoletti preceduti da #. Così, sotto #outer-wrapper, c'è il valore width, che dovete aumentare minimo di 250 px (quindi circa 1000px). Riportate lo stesso valore anche sotto il #content-wrapper, sempre accanto al valore width. (Il mio per esempio è di 1100 px.)
- E ora viene la parte fondamentale.Troverete, un po' più sotto, la sezione #sidebar-wrapper, o soltanto #sidebar. Selezionate tutto ciò che riguarda questa sezione, titoletto compreso, e copiatelo. Fatto ciò, posizionate il cursore del mouse sotto la parentesi graffa che chiude i valori della sidebar, cliccate e incollate la parte prima copiata.
- Rinominate la nuova parte che avete creato grazie al praticissimo copia-incolla: non si chiamerà più soltanto #sidebar-wrapper, bensì #newsidebar-wrapper. Modificato il nome? Bene, questo ci permetterà di far distinguere all'HTML del blog le due colonne, senza che si confonda.
- Ora cercate sotto questa newsidebar-wrapper il valore float. Se c'è scritto left, cancellate e modificatelo con right. Viceversa, se c'è scritto right, cancellate e sostituitelo con left.
- Questa parte è un po' delicata.
Andate nella seconda parte dell'HTML, quella con tutti gli elementi che iniziano per "div id=" e cercate questo:
Sotto di questo,
copiate e incollate questa parte qui sotto:
Ora provate a visualizzare l'anteprima del vostro blog. Dovrebbe funzionare. Se vi soddisfa, salvate le modifiche, altrimenti scrivetemi un commento per segnalarmi il problema.
Il risultato invece nella parte "Elementi pagina" deve essere qualcosa di simile a questo:
Ricordate un'ultima cosa!
Nel caso in cui le misure vedete che vi sballano un po' le posizioni della parte centrale con i post e delle due colonne, tenete presente sempre che la somma tra i
width (di cui abbiamo parlato al punto 2) delle
sidebar-wrapper,
newsidebar-wrapper e
main-wrapper (o semplicemente
main) deve essere inferiore di almeno 20 px al width del
content-wrapper (quello che abbiamo aumentato all'inizio).
Fatemi presente consigli, suggerimenti, problemi che avete riscontrato nella modifica....
