Pubblicato il 04/06/15e aggiornato il

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.

modificare-distanze-menu 

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

analizza-elemento-firefox

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

selettore-univoco-elemento

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

diminuire-aumentare-distanze-layout

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.




12 commenti :

  1. ciao
    davvero utilissimo questo articolo e devo dire che ci sono anche riuscita ma...
    da firefox vedo la modifica, e da crome no !
    cosa devo fare? cosa sbaglio?
    e poi ancora una domanda: per fare la stessa cosa ma tra post e post come faccio?

    grazie mille
    sara

    RispondiElimina
    Risposte
    1. cioè...vedo la modifica mentre inserisco il codice in 'blocco note' ma poi dopo averlo inserito nel modello HTML no :'(

      Elimina
    2. Succede raramente che un codice funzioni su Chrome ma non su Firefox o viceversa. Prova a rendere compatibile il tuo blog con tutti i browser
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      Non ho capito cosa vuol dire vedere la modifica nel blocco note. La modifica si vede solo quando si apre il sito anche nell'Anteprima del modello spesso non si vede correttamente.
      Per le distanze tra post e post devi seguire la stessa procedura cercando i giusti selettori con il sistema illustrato nel post e nel video tutorial
      @#

      Elimina
    3. ho avuto un 'ispirazione' e finalmente ci sono riuscita! grazie dei tuoi preziosi consigli :D
      a presto...mi sa!

      Elimina
  2. grazie Ernesto , ho ridotto i margini nel mio sito ma mi è scomparsa la foto nella home. Puoi aiutarmi??

    http://infoutili.blogspot.it/

    RispondiElimina
    Risposte
    1. Le immagini ci sono comunque se qualcosa non va puoi sempre togliere il CSS aggiunto
      @#

      Elimina
    2. Gentile Ernesto, con i margini ho risolto ma l'immagine si è decentrata e non funziona la centratura con nessuno dei due metodi da te indicati nell'altra guida. ........hai soluzioni ?
      Grazie mille

      Elimina
    3. Leggiti questo post
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      @#

      Elimina
  3. Salve,per aumentare lo spazio nella versione mobile c'è un css a parte perchè sembra non funzionare cambiando i valori-Grazie

    RispondiElimina
    Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      e per trovare i selettori univoci nella versione mobile devi usare questo tool
      http://www.ideepercomputeredinternet.com/2015/03/responsive-design-test.html
      @#

      Elimina
  4. Ciao Ernesto potresti linkarmi il post su come aumentare lo spazio tra i widget?? Grazie

    RispondiElimina
    Risposte
    1. Leggi il post su come diminuire questo spazio
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
      Ovviamente invece di mettere dei numeri negativi ci devi mettere numeri positivi. Visto che l'articolo è vecchio lo riprenderò i prossimi giorni
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.