Blogger: le tre colonne alla portata di tutti

Il restyling del mio blog, di questi giorni, mi ha portata ad addentrarmi in argomenti con cui ho un rapporto di amore-odio, amore quando ottengo il risultato atteso, l’odio (o quanto meno un po’ di frustrazione) nei diecimila tentativi impiegati per arrivare a quel risultato. Comunque anche una profana come me è riuscita, sicuramente grazie all’aiuto di altri blogger più ferrati , a cimentarsi nei pezzi forti della realizzazione di un template a tre colonne, nella personalizzazione della home page, nella realizzazione di un banner e della relativa teca d’esposizone (lo so che non si chiama così, ma non mettetemi fretta…)

Posterò il mio calvario per tutti gli altri impediti della rete che vogliono cimentarsi nella stessa avventura, se ci sono riuscita io, garantito, ci possono riuscire tutti, a iniziare dalla realizzazione del template a tre colonne.

Sui template ognuno ha le proprie idee, c’è chi lo prende così come lo trova e non lo personalizza minimamente, e chi invece è alla ricerca di un template che calzi come un vestito su misura, io sono una chiacchierona cronica (si dice logorroica?) per cui un template troppo stretto sarebbe risultato dispersivo per contenere i miei post, inoltre mi piace aggiungere immagini e, forse perché sono miope, mi piace anche vederle belle grandi, così come i caratteri di scrittura, per cui le dimensioni del mio blocco dei post (si, lo so, non si chiama così tecnicamente….) deve essere necessariamente generoso.

Tra i vari template di blogger poi preferivo quelli a tutto schermo, perché dotati di una colonna molto ampia da poter riempire con testo, foto e tool vari, ma esteticamente la trovavo anche “troppo ampia” e spesso sguarnita nei bordi, insomma, perché non togliere un po’ di spazio dalla colonna di sinistra per crearne una a destra e raddoppiare lo spazio della home page? Avevo già provato ad installare un template preconfezionato a tre colonne scaricandolo dal sito http://www.blogcrowds.com/ eppure, pur seguendo quelle che dovevano essere istruzioni semplici (ossia scegliere lo stesso tipo di modello adottato per il proprio blog, copiare e incollare il codice e sostituirlo integralmente nella relativa pagina html) io non ci sono riuscita, il sistema mi restituiva messaggi in cui segnalava il codice inesatto, forse per la mancanza di tutti i tag di chiusura. Poi un giorno, visitando il blog sempre aggiornato e utile di yuri ho trovato questo post e ho provato a cimentarmi anche io, ci ho lavorato un po’ su e la terza colonna è finalmente venuta alla luce.

Ho fatto esperimenti su vari modelli, quello che offre maggior corrispondenza di html è il minima, personalmente ho scelto lo snapshot, anche se avrei preferito un modello più personalizzabile dal punto di vista cromatico (va beh, lo faccio per il prossimo cambio di stagione). La modifica che bisogna apportare all’html consiste nel rintracciare determinate stringhe di testo e sostituirle con altro testo, questo implica che, se il nostro modello è già fornito di una colonna destra, dovremo seguire solo le istruzioni per creare la sinistra e viceversa.

Siete pronti? Partiamo allora: Bacheca; modifica html ed espandere i windget (credo che questo ultimo passaggio non sia sempre determinante, se tra un salvataggio e l’altro vi dimenticate di estenderli probabilmente il risultato non cambierà.)

Iniziamo con il creare la terza colonna a destra (ossia il vostro modello ha un corpo centrale e una colonna a sinistra)

Aprite un’altra scheda del vostro browser (io ho usato firefox), che vi servirà solo per agevolarvi nelle ricerche con l’aiuto dell’evidenziatore. Dovrete infatti cercare molte stringhe sparpagliate nel codice, e senza evidenziatore l’impresa risulterebbe lunga e sfiancante.

Andando invece nella pagina web vuota e chiedendo la ricerca di una determinata striscia

saprete esattamente posizionarvi al punto utile.

IMPORTANTE: PER POTER RIPORTARE IL TESTO ALL'INTERNO DI QUESTO POST SENZA CREARE UN CONFLITTO DI CODICE, HO DOVUTO CREARE UNO SPAZIO TRA < e Il codice, quindi nelle vostre modifiche annullate l'eventuale spazio vuoto

Individuato il testo

< id="'sidebar-wrapper'">
< class="'sidebar'" id="'sidebar'" preferred="'yes'">

lo dovrete sostituire con:

< id="'left-sidebar-wrapper'">
< class="'sidebar'" id="'left-sidebar'" preferred="'yes'">

E fin qui è tutto facile, il testo è sempre corrispondente

Cercate ora:

< div id="content-wrapper">

E sostituitelo con

< id="'content-wrapper'">
< id="'right-sidebar-wrapper'">
< class="'sidebar'" id="'right-sidebar'" preferred="'yes'/">
< /div>

Anche questo passaggio è semplice perché il testo corrispondeva esattamente in tutti i modelli su cui ho provato a fare la ricerca.

La cosa si complica leggermente ora, perché la formula magica non sempre corrisponde perfettamente, e se uno non è molto pratico ha paura di sbagliare, ma osando e provando (insomma, male che vada si ripristina il modello iniziale…) si riesce a fare. Tuttalpiù anziché cercare # sidebar - wrapper { effettuate la ricerca su un testo più identificabile come word-wrap: break-word; /* . Nella maggior parte dei modelli non troverete sidebar-wrapper ma main wapper.

La stringa da cercare è questa:

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 occorre sostituirla con questa

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

A questo punto la terza colonna è stata creata, ma occorre definire le dimensioni. Il criterio utilizzato nei modelli non a schermo intero sono i pixel, e una buona proporzione tra dimensioni e schermo si è rivelata questa (cercare e intervenire sulle cifre dopo il width:

#outer-wrapper {
width: 940px;
margin: 0 auto;
text-align: $startSide;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;

in questo caso 940 pixel è la dimensione totale del blog, adatta ad uno schermo grande ma visibile interamente anche su uno schermo più piccolo (poi dipende quanto più piccolo…)

descriptionwrapper {
background: #fff url(http://www.blogblog.com/snapshot/bg-sidebar.gif) 1px 0 no-repeat;
#main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 500px;

Il 500 rappresenta la mia area post, per cui lo spazio centrale, se volete allungarlo o diminuirlo dovrete sempre e solo tenere conto del fattore aritmetico: il blog deve essere costituito da totale (outer wrapper) e le varie componenti, sommate, non potranno superare questa soglia, inoltre se risultasse troppo schiacciato sarà meglio che la somma delle tre colonne sia un po’ inferiore al totale.

#right-sidebar-wrapper {
width: 200px
float: right;
word-wrap: break-word;
overflow: hidden;
#left-sidebar-wrapper {
width: 210px;
float: left;
word-wrap: break-word;
overflow: hidden;

il 200 e il 210 rappresentano le mie due colonne, in questo caso ne ho scelta una un po’ più grande dell’altra, fate le vostre prove e chiedete l’anteprima fino a quando non siete soddisfatti del risultato.

Per creare la terza colonna a sinistra, dovrete eseguire gli stessi passaggi descritti sopra ovvero cercare:

< id="'sidebar-wrapper'">
< class="'sidebar'" id="'sidebar'" preferred="'yes'">

E sostituirlo con

< id="'right-sidebar-wrapper'">
< class="'sidebar'" id="'right-sidebar'" preferred="'yes'">

Cercare

< id="'content-wrapper'">
E sostituirlo con

< id="'content-wrapper'">
< id="'left-sidebar-wrapper'">
< class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">
< /div>

Cercare

#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 */
}

Tenendo conto della non completa corrispondenza tra i vari modelli e sostituirlo con

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

E poi tornare a fare gli accorgimenti sulle misure sopra descritte.

A questo punto avrete ottenuto il vostro blog a tre colonne. Ma se voleste di più? Se Voleste, per esempio, un blog a schermo intero che si adatti al monitor di chi vi legge, stringendosi all’occorrenza e sfruttando tutto lo spazio a disposizione nel caso dei moderni schermi panoramici?

La soluzione è semplicissima, basta cambiare le misure da pixel a percentuali, ed ecco le mie misure:

/* -- layout -- */
#outer-wrapper {
width: 99%;
margin: 1%;
text-align: $startSide;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;
}

Ho scelto di inserire il 99% anziché il 100% perché quell’1% mi permette di avere un margine laterale che rende il blog più leggibile, evitando di schiacciare il testo contro i bordi, con un maggior risultato in fatto di equilibrio e di estetica.

#main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 60%;
}

In questo caso 60% è lo spazio destinato ai miei post, ovvero l’area centrale

#right-sidebar-wrapper {
width: 15%;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 20%;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Per le due colonne, ho di nuovo scelto dimensioni differenti, 15 % per quella di destra e 20% per quella di sinistra.

Sommando le varie aree, ho utilizzato 95 su 99, lasciando un 4% di spazio che si è auto distribuito tra i margini senza che io dovessi stabilire le quote.

Il risultato? Quello che vedete, un blog a tre colonne che si adatta alle dimensioni del vostro schermo, se lo riducete o modificate l'area della finestra, lo spazio si adatterà in modo elastico in modo da essere sempre visibile.

Buona indigestione di html a tutti!

AGGIORNAMENTO

Date le difficoltà a copiare il testo modificato così come l'ho postato, ho creato un post dove ho messo a disposizione questo layout integrale, l'html è già stato ottimizzato per cui non dovete fare altro che selezionarlo, copiarlo e incollarlo (dopo aver esteso i widget) sul vostro html. L'ho postato su un blog nuovo dove raccolgo tutte le mie esperienze "tecniche" di blogger inesperta un po' meno inesperta di 6 mesi fa.

Potete trovare il codice quì

e se scorrete bene il blog troverete molte altre cose interessanti, tra cui un sito che offre gratis layout a 3 e 4 colonne. Sono leggermente difettose, se siete alla prima esperienza e se avete un solo blog potrebbe essere difficile da gestire perchè il layout elimina la barra di navigazione costringendovi a fare percorsi alternativi per aggiornare post e layout, ma sono davvero belli.