Come diminuire lo spazio tra post e post e tra widget e widget in Blogger.

Come diminuire o aumentare la distanza tra i vari elementi del layout utiizzando lo strumento Firebug di Firefox.

Quando ho introdotto l'estensione Firebug per Firefox, avevo accennato a come possa essere utilizzata per modificare alcune parti del modello in modo molto semplice. Vediamo subito un paio di casi in cui si può usare. In alcuni commenti, diversi utenti di Blogger, si lamentano di come i singoli post siano troppo distanti tra di loro quando si apra la homepage e di come lo siano anche alcuni widget nella sidebar.

Come diminuire la distanza tra i post in Homepage

Si apre Firefox, si va sulla homepage del nostro blog e si clicca sulla icona di Firebug. Successivamente si seleziona l'area di un post e si controlla quale sia la classe che ne determina lo stile

 

Nella finestra di Firebug si vede che la classe in questo caso è post-outer. Può essere anche post hentry o date-posts o un'altra ancora. Se siete indecisi perché non riuscite a selezionare bene l'area, provate con più classi diverse. Si va su Design > Modifica HTML, segnatamente nella sezione <b:skin>, si cerca cioè la riga 

]]></b:skin>

e, subito sopra, si incolla il codice

.post-outer {
margin-bottom: -20px;
}

dove il numero dei pixel può ovviamente essere personalizzato. L'aspetto della homepage varierà in questo modo dopo che si è salvato il template 

Nel blog che ho usato come test questa modifica non era necessaria ma è stato solo per dare una idea del suo funzionamento.

Come diminuire la distanza tra i widget in una sidebar

Si usa sempre Firebug per individuare l'ID del widget in questione. Ammettiamo che noi volessimo diminuire la distanza tra il widget di Google Friend Connect e quello dell'Archivio sempre nello stesso blog preso come test di prova. Si clicca su Inspect, si seleziona il widget e se ne ricava l'ID

Nella finestra di Firebug si vede che gadget di GFC ha come ID Followers1. Per diminuire lo spazio tra questo gadget e quello sottostante, possiamo come prima andare su Design > Modifica HTML e cercare la riga ]]></b:skin>. Alternativamente, se si ha un template del Designer Modelli, si può andare in Design > Designer Modelli > Avanzato > Aggiungi CSS e incollare nel campo sulla destra questo codice 

#Followers1{
margin-bottom: -30px
}

dove si può personalizzare la misura in rosso. Si clicca in alto a destra su Applica al blog per rendere le modifiche definitive. Con questo sistema si può vedere l'anteprima immediatamente, nella parte bassa della pagina, dopo che si è incollato il codice. E' un sistema da preferire perché si riesce a calibrare la distanza giusta con grande facilità

Queste tecniche possono essere usate per tutti i widget. Concludo osservando che si possono anche aumentare le distanze tra i vari gadget inserendo dei valori positivi nel parametro margin-bottom. Inoltre va da sé che ci sono naturalmente altri modi per determinare l'ID di un widget.