Pubblicato il 25/06/12 - aggiornato il  | 23 commenti :

Come diminuire lo spazio tra titolo e testo del post.

Come diminuire la distanza in Blogger tra il titolo dell'articolo e il contenuto del post.
Dopo aver visto come diminuire la distanza tra articolo e articolo in homepage passiamo a un altro personalizzazione su questa stessa falsariga. In alcuni modelli la distanza tra titolo del post e il suo contenuto è troppo elevata e danneggia l'estetica del layout.

Vediamo come risolvere in modo semplicissimo questo piccolo problema. Si va su Modello > Backup/Ripsitino e si salva il modello completo nel caso in cui si combinasse qualche pasticcio con i codici. Si può operare sul template oppure usare il Designer Modelli. Nel primo caso si va su Modello > Modifica HTML > Procedi e si cerca la riga che indica la fine dei CSS del modello vale a dire

   ]]></b:skin>

mentre nel secondo caso si va su Modello > Personalizza > Avanzato > Aggiungi CSS. Il codice da incollare rispettivamente sopra alla riga indicata sopra o nel modulo in alto a destra sarà

.post-header {margin-top:-20px;}

spazio-titolo-post

Dove la diminuzione dello spazio impostata su -20 pixel può essere modificata. Se si sostituiscono valori negativi con valori positivi in margin-top si ottiene un aumento dello spazio tra titolo e testo del post.


23 commenti :

  1. e per diminuire la distanza tra primo post e header del blog?grazie

    RispondiElimina
  2. @Domenico...
    Usa questo codice
    .header-inner {margin-bottom:-30px;}
    da inserire nello stesso punto
    alternativamente quest'altro
    .main-outer {margin-top:-30px;}
    che forse è migliore

    RispondiElimina
    Risposte
    1. si, il secondo fa quello che volevo anche se non si sposta oltre i 30px...nel senso che se imposto 50 non vedo alcuna differenza. Se magari passi dal mio blog vedrai che ho messo il ticker in alto e sto cercando di farcelo stare in maniera elegante...quindi lo spazio tra post e widget era troppo, adesso già è migliorato ma mi sa che lo posizionerò lateralmente

      Elimina
  3. Ciao Ernesto,
    per caso questo metodo può essere usato anche per distanziare un po' i titoli dei post inseriti in un widget dal loro contenuto?
    Mi spiego meglio: supponiamo che io abbia il widget degli ultimi articoli, e voglia distanziare un po' i titoli dei post in elenco dal loro sommario. Posso inserire all'interno del codice una stringa di questo tipo, sostituendo la voce .post-header con quella appropriata?
    Grazie

    RispondiElimina
    Risposte
    1. @ Giuliana
      No, non si può fare con questo CSS, bisognerebbe modificare il javascript del widget e l'impresa non sarebbe da poco.

      Elimina
  4. Ernesto ho un problema con il mio blog...

    con il codice che hai nel tuo articolo non sono riuscito a diminuire lo spazio tra il titolo e il post del mio blog: http://la-tv-gratis1.blogspot.it/2013/02/canale-5-streaming-gratis.html

    Se mi puoi dire come posso risolvere.

    Grazie

    RispondiElimina
    Risposte
    1. @# Il tool di elezione per queste operazioni è quello di usare Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      Trovi la classe o l'ID degli elementi e poi utilizzi il codice del post sostituendo ovviamente classe e ID

      Elimina
  5. Io uso google chrome, ma io voglio diminuire lo spazio tra il titolo e contenuto del post del mio blog non devo mettere il codice che hai scritto nel tuo articolo???

    Perche devo usare firebug?

    Saluti

    RispondiElimina
    Risposte
    1. @# Devi usare Firebug per scoprire la classe di stile che nel tuo modello è relativa all'elemento che vuoi avvicinare. In altre parole che cosa devi mettere al posto di .post-header
      Se usi Chrome puoi utilizzare l'estensione Firebug Lite
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
  6. Ciao Ernesto, ci ho provato con il CSS ma senza risultati (non mi addentro nell'html!)...non cambia nulla anche se vario il numero 20...peccato perchè con i tuoi post ho creato da sola il mio blog su blogger dalla A alla Z...però lo spazio eccessivo tra inizio post e titolo post è davvero un pugno nell'occhio...magari potresti darmi un parere, il mio link è http://www.lepassionidiantonella.com
    Grazie anticipatamente.
    Antonella

    RispondiElimina
  7. Ciao Ernesto, grazie infinite per la tempestività di riscontro...purtroppo non va neppure con questo secondo cod...ormai è diventato un dilemma...

    RispondiElimina
  8. Vorrei chiedere una cosa che non c'entra con l'articolo ma non sapevo in quale altro chiedere d'altronde il tema è sempre "spaziature".

    Quando scrivo su un post posso (solo dove desidero) andare a capo con una distanza fra riga sopra e riga sotto diversa rispetto a quella di default...ad esempio come è possibile fare su Word.
    Spero di essermi fatto capire.
    Grazie

    RispondiElimina
    Risposte
    1. L'Editor di Blogger non è così sofisticato. Anche creando gli articoli con Windows LIve Writer quando poi vengono pubblicati la distanza tra riga e riga si azzera pure se su WLW era impostata diversamente. Personalimente prima di pubblicare un articolo inserisco il cursore tra i paragrafi che voglio distanziare e pigio su Invio.
      @#

      Elimina
    2. Non ho capito.
      Quando scrivo con Word incollo il contenuto su blogger, lo seleziono e premo l'icona Tx "formatta testo", si scombussola un pò, ma con l'editor di blogger lo riposiziono come desidero, palloso, ma nulla di strano.
      Quello che chiedo è come si fa per andare a capo con uno spazio bianco inferiore a quello di default ad esempio così:

      ciao

      Enrnesto

      ecco vorrei la distanza/ la riga bianca fra "ciao" ed "Ernesto" più sottile, non eliminata, solo più sottile...ora me la ha fatta della dimensione del font, come posso personalizzare quella dimensione?

      Probabilmente devo mettere una stringa particolare sull'HTML del post per controllare ciò ma quale è?
      Per andare a capo so che il tag è
      , ma inserendolo ho la riga bianca di spaziatura troppo grande, qual'è il tag che fa la stessa mansione di
      ma mi permette di gestire la dimensione della spaziatura.

      se non erro, va a capo con la dimensione del font che uso di default per scrivere, giusto??! Ecco io voglio personalizzarmi quella distanza all'interno del post come si fa.
      Forse mi sono ancora spiegato male, ma non so come spiegarmi XD.
      Grazie

      Elimina
    3. Tu vorresti gestire lo spazio tra righe di testo e tra paragrafi. La risposta non può essere data in un commento. Visto che il tema potrebbe interessare anche ad altri ci farò un post. Se ho mezzora di tempo anche domattina. Seguimi
      @#

      Elimina
  9. Ciao Ernesto, ho utilizzato recentemente il tuo suggerimento (in realtà nel mio caso serviva per aumentare lo spazio ed ha funzionato). Però mi ha risolto il problema nella homepage mentre il problema del titolo (in particolare quelli un po' lunghi che vanno su due righe) troppo vicino al testo del post sussiste ancora nel caso in cui apra la pagina del singolo post. Hai suggerimenti?
    Grazie mille
    Valentina

    RispondiElimina
    Risposte
    1. Nel senso che il titolo va troppo vicino al contenuto del post?
      Prova a inserire nei CSS cioè nella sesione b:skin questa riga di codice
      .post-title h3 {margin-bottom:40px !important}
      dove il 40 lo puoi calibrare al meglio. P.S. Questo vale solo per un modello ufficiale di Blogger. Se lo hai scaricato da internet può darsi che tu abbia un selettore diverso da .post-title h3
      @#

      Elimina
  10. C'è un modo per diminuire lo spazio tra il titolo del blog e la descrizione?

    RispondiElimina
    Risposte
    1. Il sistema è quello di trovare l'ID o la classe di uno dei due elementi con Ispeziona elemento. Tali ID sono diversi da modello a modello in quelli Responsive
      http://www.ideepercomputeredinternet.com/2017/08/chrome-developer-tools.html
      Successivamente si seguono le istruzioni di questo post. P.e. per il nome del blog si crea un codice del genere
      #idnomeblog {margin-bottom:30px;}
      mentre per la descrizione si può usare un codice come questo
      #iddescrizione {margin-top:30px;}
      per aumentare di 30 pixel la distanza tra i due elementi. Al posto del cancelletto potrebbe esserci il punto .classenomeblog o .classedescrizione. I codici vanno incollati sopra alla riga indicata nell'articolo
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy