Pubblicato il 25/06/12e aggiornato il

Come aumentare o diminuire lo spazio tra data e titolo.

Come configurare esattamente la distanza tra data e titolo del post in Blogger.
Continuo con questi minipost, che certo non saranno ben visti dal Panda Update, che hanno l'intento di aiutare a settare le distanze della parte alta degli articoli in Blogger. Dopo aver visto come diminuire lo spazio tra post e post e come diminuirlo tra titolo e testo dell'articolo chiudiamo il cerchio con il settaggio della giusta distanza tra data e titolo del post nei modelli di Blogger.

Come al solito si può operare su template o sul Designer Modelli. In ogni caso conviene sempre andare su Modello > Backup/Ripristino e salvare il modello completo per questioni di sicurezza. Se si preferisce operare sul template, è il mio caso, si va su Modello > Modifica HTML > Procedi e si cerca la riga

]]></b:skin>

Se invece optiamo per il Designer Modelli si va su Modello > Personalizza > Avanzato > Aggiungi CSS. In entrambi i casi va incollato questo semplice codice

 .date-header {margin-bottom:-20px;} 

distanza-data-titolo-blogger

Si salva il modello se si è operato sul template e si va su Applica al blog nel caso del Designer Modelli. Il valore negativo -20 pixel in margin-bottom può essere sostituito da un valore positivo se si vuole aumentare lo spazio tra data e titolo nel caso fosse troppo angusto.




14 commenti :

  1. Il vero problema sai qual è? Internet Explorer. Nei vari blog gestiti finora ho notato che le distanze fra gli elementi sono giuste con Chrome o Firefox, mentre con IE diventano abissali (e non c'è verso di ridurle, modificando il css).

    RispondiElimina
    Risposte
    1. @Bastet
      Io Internet Explorer non lo considero neanche più. Spero solo che a fine anno con l'uscita di Internet Explorer 10 insieme a Windows 8 vengano finalmente risolti tutti questi problemi.

      Elimina
    2. Purtroppo molti utenti lo usano ancora. Io ci entravo solo per controllare che le varie modifiche al blog fossero compatibili, ma da quando ho preso due virus ci sto alla larga.

      Grazie a un tuo articolo, ho inserito un messaggio solo per utenti IE in cui li avviso che ci possono essere problemi nella corretta visualizzazione del blog.

      Elimina
  2. questo era l'articolo che cercavo, ma volevo sapere come spostare la data sotto il titolo del blog.

    RispondiElimina
    Risposte
    1. @# Non ho mai scritto un post al riguardo. Seguimi nei prossimi giorni (senza impegno)

      Elimina
  3. Ciao Ernesto,
    e se volessi diminuire le distanze tra data e pagine statiche con un CSS (in blogger)?
    Grazie!

    RispondiElimina
    Risposte
    1. Nel senso che vuoi diminuire la distanza tra data e titolo solo nelle pagine statiche? In questo caso usa questo codice

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style>
      .date-header {margin-bottom:-20px;}
      </style>
      </b:if>

      da incollare subito sopra alla riga </head>

      @#

      Elimina
    2. Sì, scusa la fretta e grazie per la risposta. Vorrei diminuire la distanza tra la data del post e il gadget pagine, in modo da avvicinare le pagine alla data (come grafica del blog). È possibile farlo con un codice CSS?

      Elimina
    3. Il mio gadget pagine è posizionato sotto l'intestazione del blog, in modo orizzontale.

      Elimina
    4. Prova a incollare questo codice

      .date-header {margin-top:-50px;}

      subito sopra alla riga ]]></b:skin>

      @#

      Elimina
    5. Grazie ancora per la risposta e il suggerimento!

      Elimina
    6. Funziona benissimo! Ora però dovrei spostare su anche le immagini delle due sidebar sia quella di sinistra sia quella di destra, non avevo pensato che non si sarebbero spostate insieme alla parte centrale del post. Il mio layhout ha una parte centrale per il post e due sidebar laterali. Ho provato a inventarmi il codice sulla falsa riga dei tuoi, ma non si è mosso niente! C'è la possibilità di alzare anche per le sidebar laterali? Grazie ancora!!!

      Elimina
    7. Togli il codice precedente e incolla questo

      #PageList1 {margin-bottom:-50px;}

      nella stessa posizione.
      P.S. Adesso non è che mi chiedi anche di spostare il footer, spero :)
      @#

      Elimina
    8. :) No basta! Sei stato davvero gentilissimo! Grazie di cuore!

      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.