Come diminuire o aumentare lo spazio tra gli elementi del layout di Blogger.

Come aumentare o diminuire le distanze tra gli elementi di un blog di Blogger con lo strumento Analizza Elemento di Firefox.

Qualche giorno fa ho ricevuto una richiesta di aiuto in un commento su come aumentare lo spazio tra il menù delle Pagine statiche di Blogger e l'area del post a cui ho risposto che ci avrei fatto un articolo di tipo generico per modificare gli spazi tra i vari elementi del layout attraverso i CSS.

Usiamo come esempio proprio quello del lettore e utilizziamo il browser Firefox con il suo strumento Analizza elemento che personalmente giudico migliore rispetto a Ispeziona elemento di Chrome. Sono entrambi dei tool che ci permettono di risalire al selettore univoco di un dato elemento del layout in modo da impostare dei nuovi margini. Mi limiterò all'esempio citato ma questo sistema può essere utilizzato sostanzialmente per tutti gli "oggetti" presenti nel layout di una pagina HTML, e non solo della piattaforma Blogger, come un titolo di un widget, l'immagine dell'Header, la scritta Aggiungi un commento o i bottoni per la condivisione sui social network.

 

Nel blog di Test che ho usato in realtà le distanze del menù delle Pagine statiche con la Descrizione del sito in alto e con la data del post in basso è sostanzialmente giusta ma vediamo come possa essere modificata. Per prima cosa dobbiamo risalire al selettore univoco del menù. Si apre il sito in oggetto con Firefox, si clicca con il destro del mouse sull'elemento di cui scoprire il suo slettore univoco e si sceglie Analizza elemento

Si aprirà in basso una finestra che potremo anche spostare di lato se fosse necessario per una migliore visualizzazione. Passando con il cursore sopra al codice della finestra verrà evidenziato l'elemento a cui si riferisce. Dopo che si è individuato il codice dell'elemento si clicca con il destro del mouse sulla freccetta posta sulla sua sinistra

Successivamente nel menù contestuale che si apre si clicca su Copia selettore univoco e, in questo caso, troveremo l'ID del menù delle pagine statiche che incolleremo in un file di testo. Il selettore univoco del menù in oggetto è infatti #PageList1 . Per modificare le distanze creeremo questo CSS

 

#PageList1 {margin-top:40px !important; margin-bottom:40px !important;}

dove il valore di 40 pixel è puramente indicativo e dove sono stati aggiunti i tag !important per dare l'informazione al browser che questo CSS deve essere prioritario rispetto ad altri simili presenti nel modello. Il codice precedente aumenta la distanza dagli elementi posti in alto e da quelli posti in basso. Naturalmente possiamo inserire solo il tipo di margine che ci interessa. Ora si va su Modello > Modifica HTML e, intorno alla 13-esima riga si clicca sulla freccetta nera per visualizzare tutto il codice presente nella sezione <b:skin>. Si digita Ctrl+F, si cerca la riga ]]></b:skin> quindi si incolla il codice precedente e si salva il modello. Il risultato sarà il seguente

Se al posto di 40px mettiamo per esempio -20px si avvicineranno gli elementi diminuendo la loro distanza. Ho pubblicato sul mio canale Youtube il video tutorial relativo a questo strumento

Il codice precedente è relativo al selettore univoco #PageList1 del menù delle pagine statiche. Se si vuole operare su un altro elemento dobbiamo ricavare il suo selettore e poi applicare la stessa sintassi.