16 aprile 2011

INSERIRE LA TERZA COLONNA NEL BLOG (PIATTAFORMA BLOGGER)...

Vi siete mai chiesti, come mai, alcuni hanno un template a 3 colonne, nonostante, la piattaforma di blogger, non offre tale opzione? Come i miei due blog, ad esempio, che oltre alla colonna di destra, hanno una colonna a sinistra... Adesso, proverò a spiegarvi come ho fatto ad attuare questa modifica, andando a toccare il modello html del nostro blog... Come prima cosa, occorre, per evitare errori e la perdita di tutto il template, scaricare e salvare la copia del modello attuale, nel pc. Andate in "modifica html" e scaricate il modello, cliccando la voce in azzurro "scarica modello completo". Fatto ciò, occorre ampliare la dimensione della nostra pagina, per avere a disposizione lo spazio necessario ad ospitare la nostra terza colonna. 
Troviamo la riga:


/* Header
-----------------------------------------------
 */


#header-wrapper {
  width:800px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


In genere, si presenta così e la dimensione indicata più comune, nei modelli di blogger è "800" circa. Dobbiamo aumentare, in ogni caso, di 200 o ( a scelta) di 250 (dimensione della nostra terza colonna) quindi, al posto di width 800, scriviamo 1000. 
Adesso scendiamo alla riga:


#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}


Ed al posto di "max-width:700px;" mettiamo max-width:900px;
Andando ancora sotto, alla voce...


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 800px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }


Modifichiamo anche qui la dimensione "width 800px" ed al posto di 800, mettiamo 1000. A questo punto, non ci rimane che aggiungere il codice della nostra terza colonna...
Scorrendo giù, vi troverete la sequenza...

#right-sidebar-wrapper {
width: 220px;
float: right;
background-image:url(); 
word-wrap: break-word;
overflow: hidden;
}

Questa è la colonna di destra,quella già esistente nelle comuni pagine. Subito sotto, dobbiamo copiare ed incollare il seguente codice...

#left-sidebar-wrapper {
width: 220px;
float: left;
background-image:url(); 
word-wrap: break-word;
overflow: hidden;
}}

Questa è la nostra terza colonna... qui, lascio a voi la scelta delle dimensioni, io ho lasciato "220", ma occorre andare a guardare anche la larghezza della vostra colonna centrale, dove si visualizzano i vostri post...
Tenete presente che il calcolo da fare è... se abbiamo 1000, come misura globale, sottraiamo le misure delle colonne (destra e sinistra) in questo caso... 1000 meno 220 meno 220, ci rimane 560 di spazio... che prende la colonna dei post... Fate più prove, sino ad ottenere gli spazi che più preferite... Per modificare la dimensione della colonna centrale, andate alla riga subito prima del codice della colonna di destra...

#main-wrapper {
  width: 400px;
  float: $startSide;
  background-image:url();
  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 */
  }

"main" indica proprio la colonna dei post... in questo caso, la dimensione è "400", ma siete liberi, tenendo sempre conto che la somma globale di tutte le colonne è 1000, togliendo almeno 40, per gli spazi/margine, di stringere o allargare da una parte piuttosto che da un'altra. Si può, ad esempio, scegliere di avere una colonna di destra di 240, quella di sinistra di 200 e la centrale di 500... Vi renderete conto, man mano che, cambiate le dimensioni, quello che sarà il risultato finale.
VI CONSIGLIO UNA SOLUZIONE SAGGIA E GRATUITA CHE VALE PER TUTTE LE PROVE E GLI ESPERIMENTI CHE VI ANDRA' DI FARE... APRITE UN BLOG "PROVA" E RENDETELO PRIVATO, IN MODO DA ENTRARCI SOLO VOI E FATE LI, SEMPRE PRIMA, TUTTE LE MODIFICHE...
(NON SI SA MAI...) Io ho fatto lo stesso....
Ma andiamo avanti.... Prima di salvare il nostro modello, con le modifiche effettuate, visualizzate l'anteprima,  vi aprirà una pagina a parte, dove (non spaventatevi) non vedrete la terza colonna già in azione, ma degli ampi spazi che intercorreranno le colonne già esistenti.... A questo punto, salvate il modello e andate in bacheca/design, dove troveremo una nuova tabella "Aggiungi gadget" ... inserite un immagine o altro per prova/spazi, salvate e visualizzate l'anteprima... Dovreste, adesso, visualizzare le tre colonne, con le relative dimensioni scelte per ognuna.... in questo modo, potete regolarvi con le dimensioni... Se... per malaugurato caso, la colonna di destra vi appare appena sotto quella centrale, andate a restringere le colonne o aumentare la dimensione globale (quindi anzicchè 1000, 1050 e così via) Mentre... se tale colonna è al suo post nella home page, ma è sotto la centrale solo nella bacheca, allora è un problema solo di windows explorer, e non del vostro modello, quindi, fate sempre riferimento a quella che è la pagina che appare aprendo il blog!  
Spero di essere stata chiara ed esaustiva, oltre che utile! Più avanti, vi spiegherò, come cambiare i singoli sfondi delle vostre colonne, in modo da differenziarle, aggiungendo immagini, sfondi a tinta unica etc...

Un caro saluto!