Come ridurre lo spazio tra post e sidebar nei template del Designer Modelli.

I nuovi modelli di Blogger, non mi riferisco a quelli a Visualizzazione Dinamica ma a quelli del Designer Modelli, lasciano un po' troppo spazio tra la parte centrale in cui viene visualizzato il post e le sidebar. Questo spazio potrebbe invece essere utilizzato per allargare l'area del post o le colonne laterali. Ricordo che si può modificare la larghezza del layout del blog attraverso il cursore presente nel tool del Designer Modelli oppure agendo direttamente nel codice.

Nel caso si voglia sfruttare lo spazio in maniera ottimale si può ridurre la distanza tra la/e sidebar e la parte centrale del layout. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si controlla se nel codice c'è la stringa di codice Content Padding. Nel caso fosse presente significa che abbiamo il modello Travel (o Viaggi) oppure un template personalizzato che è comunque una sua derivazione. Dovrebbe essere allora presente un codice simile a questo

<Variable name="content.padding" description="Content Padding" type="length" default="20px" value="20px"/>

Per diminuire la distanza tra gli elementi occorre mettere value="0px" o comunque un numero inferiore a 20px. Si salva il modello. Se tale stringa non fosse presente si cerca allora la riga che denota la fine dei CSS vale a dire ]]></b:skin> . Immediatamente sopra incolliamo un codice come questo

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {margin-left: -15px !important;}

dove il valore negativo in rosso può essere calibrato al meglio secondo il nostro layout. Si salva il modello e il risultato potrebbe essere così

con le sidebar molto più vicine all'area del post. Questa personalizzazione è opportuno effettuarla insieme a una modifica complessiva delle larghezze delle sidebar e dell'area principale. Nel caso si abbia un modello con una sola sidebar sulla destra il codice da incollare, sempre sopra a ]]></b:skin>, sarà

.column-right-inner {margin-left: -25px !important;}

con il numero in rosso da personalizzare secondo le nostre esigenze.