Pubblicato il 17/11/11e aggiornato il

Come ridurre lo spazio tra post e sidebar nei template del Designer Modelli.

I nuovi modelli di Blogger, non mi riferisco a quelli a Visualizzazione Dinamica ma a quelli del Designer Modelli, lasciano un po' troppo spazio tra la parte centrale in cui viene visualizzato il post e le sidebar. Questo spazio potrebbe invece essere utilizzato per allargare l'area del post o le colonne laterali. Ricordo che si può modificare la larghezza del layout del blog attraverso il cursore presente nel tool del Designer Modelli oppure agendo direttamente nel codice.

Nel caso si voglia sfruttare lo spazio in maniera ottimale si può ridurre la distanza tra la/e sidebar e la parte centrale del layout. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si controlla se nel codice c'è la stringa di codice Content Padding. Nel caso fosse presente significa che abbiamo il modello Travel (o Viaggi) oppure un template personalizzato che è comunque una sua derivazione. Dovrebbe essere allora presente un codice simile a questo

<Variable name="content.padding" description="Content Padding" type="length" default="20px" value="20px"/>

Per diminuire la distanza tra gli elementi occorre mettere value="0px" o comunque un numero inferiore a 20px. Si salva il modello. Se tale stringa non fosse presente si cerca allora la riga che denota la fine dei CSS vale a dire ]]></b:skin> . Immediatamente sopra incolliamo un codice come questo

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {margin-left: -15px !important;}

dove il valore negativo in rosso può essere calibrato al meglio secondo il nostro layout. Si salva il modello e il risultato potrebbe essere così

distanza-sidebar-post

con le sidebar molto più vicine all'area del post. Questa personalizzazione è opportuno effettuarla insieme a una modifica complessiva delle larghezze delle sidebar e dell'area principale. Nel caso si abbia un modello con una sola sidebar sulla destra il codice da incollare, sempre sopra a ]]></b:skin>, sarà

.column-right-inner {margin-left: -25px !important;}

con il numero in rosso da personalizzare secondo le nostre esigenze.





24 commenti :

  1. Ernesto io ho un problema che non riesco a risolvere, e cioè lo spazio tra il titolo del post e l'immagine che inserisco mi sembra eccessivo (qui un es:http://sauroweb.blogspot.com/2011/11/convertire-online-gli-ebook-nel-formato.html) e vorrei ridurlo almeno della metà, dove (e come) potrei agire?

    Grazie Sauro

    RispondiElimina
  2. @Sauro
    E' una cosa che riguarda l'interno del post. Vedo che inizi il post con una immagine. Hai provato a vedere cosa succede con un testo?
    Se in quel caso va bene prova a modificare questa linea
    .post img{background:#0d0d0d; padding:4px}
    mettendo padding:0; oppure margin-top:-20;

    RispondiElimina
  3. Niente, non va ma la cosa è relativa; nel senso che non è un reale problema io giudico (per modo di dire) i vari blog dal contenuto non dall'estetica ;) ciao

    RispondiElimina
  4. Ciao io non riesco a ridurre lo spazio. Non uso il modello Viaggi ma Fantastico quindi il codice non è presente ma nemmeno usando .column-right-inner {margin-left: -25px !important;} riesco a cambiare la situazione. Come mai?
    Questo è il blog http://playstationgen.blogspot.com/

    RispondiElimina
  5. @Niconico-San
    Non te lo so dire. Non escludo che sia cambiato nuovamente qualcosa nei codici di Blogger dalla pubblicazione del post.

    RispondiElimina
  6. Capito... è molto difficile a volte stargli dietro :P

    RispondiElimina
  7. Ciao!

    Come potremmo fare invece per ridurre lo spazio tra il margine sinistro (seguendo la tua foto, l'inizio della parte bianca-blu) e il testo della stessa sidebar? Sempre in orizzontale intendo...

    RispondiElimina
  8. anche io ho lo stesso problema, qui il blog: http://paperandneedle.blogspot.it/
    non riesco a ridurre quell'antiestetico spazio subito dopo il post, nonostante abbia eseguito i vostri consigli.
    Grazie comunque dell'aiuto

    RispondiElimina
  9. ciao :) posso chiedere anche io aiuto?? come posso ridurre la distanza tra i post del blog? sarò io tonta ma non trovo la soluzione pur leggendo il tuo utilissimo Blog..
    grazie mille!!

    RispondiElimina
    Risposte
    1. @SviluppoPersonale
      Ho pubblicato questo post
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
      molto tempo fa. Forse è il caso che nei prossimi giorni riprenda questo tema. Comunque il principio resta valido.

      Elimina
  10. Ciao Ernesto! Grazie al tuo blog stiamo riuscendo a fare mille cose alla grafica del nostro modello! Felici!
    Ma oggi siamo qui ancora a chiedere un help, scusaci!
    Vogliamo fare in modo che il testo del post sia largo quanto l'immagine (per la quale abbiamo dato una dimensione massima di 750 pixel) é possibile? Come potrai vedere ( http://detailsofus.blogspot.it/) il nostro testo dei post è più largo dell'immagine e anche delle linee del menu.

    Grazie!

    RispondiElimina
    Risposte
    1. Il testo deve essere più largo delle immagini. Puoi modificare le larghezze del blog ma è un lavoro difficile e pericoloso
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html
      Potresti anche intevenire con il tag margin-left e margin-right in .post.body { per rendere più stretta l'area del testo
      @#

      Elimina
  11. Non ci riusciamo... Ma un effetto di questo tipo non è possibile ottenerlo? http://weddingwonderland.it/

    RispondiElimina
    Risposte
    1. Il blog linkato è su Wordpress e se parli di avere testo e immagini della stessa larghezza ci si può riuscire con un po' di pazienza con il sistema che ti ho detto nel commento 10.a
      @#

      Elimina
  12. SI ci stiamo provando, abbiamo questo codice in quel punto:
    .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: center;
    margin-left: 0px;
    margin-right: 0px;
    }

    ma quando mettiamo un valore ai margini si sposta tutto, sia il testo che la foto andando a finire sulla colonna di destra :-(

    RispondiElimina
    Risposte
    1. @# Prova così

      .post-body {
      font-size: 110%;
      line-height: 1.4;
      position: center;
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 0px !important;
      padding-right: 0px !important;
      }

      Elimina
  13. Grazie mille! Ci siamo riusciti! :-) Fantastico!
    Abbiamo usato il tuo codice con padding-left: 20px !important;
    Grazie!

    RispondiElimina

  14. Ciao sono alle prime armi e ho trovato queste pagine molto utili, complimenti.
    ti volevo chiedere una cosa,
    Questo consiglio mi è stato molto utile per avvicinare la sidebar all'aria principale, però adesso ho un problema, c'è molto spazio tra il sidebar e il margine del blog, posso allargare il corpo centrale o la sidebar per aver un blog più compatto e senza spazi?

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://giampyassistenza.blogspot.it/
      Sembra uno ufficiale di Blogger. Leggi questo post
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html
      su come modificare le larghezze dei vari elementi. Ricordati di salvare il modello prima di qualsiasi cambiamento
      @#

      Elimina
    2. Intanto grazie per la risposta celere, sei molto gentile, quel post che mi hai linkato lo avevo già visto, se allargo la sidebar di conseguenza si allarga anche tutto il blog. Io intendevo se si poteva recupera lo spazio che c'è tra la fine del sidebar e la fine del blog, se vedi ci sono delle righe verdi e quindi è facilmente controllabile, o invece quello è una spazio fisiologico che ci deve essere per forza.
      grazie

      Elimina
    3. Tu puoi impostare la larghezza complessiva di tutto il blog e la larghezza della/e sidebar. Lo spazio esterno dipende dalla risoluzione dello schermo del PC con cui apri il blog. Se la larghezza complessiva è di 1000 pixel e apri il sito con uno schermo da 1920 pixel ci saranno 920 pixel vuoti a sinistra e a destra. Se però lo apri con un netbook da 1200 pixel allora lo spazio vuoto sarà molto minore.
      @#

      Elimina
    4. purtroppo non riesco a spiegarmi bene, non è una questione di risoluzione, mi rimane un sacco di spazio libero tra il corpo centrale e la sidebar, anche tra la sidebar e la fine del blog, se avvicino la sidebar con .column-right-inner {margin-left: -25px !important;} mi rimane ancora più spazio a destra, io volevo una cosa più compatta. Dovrei mandarti un disegno per spiegarmi meglio

      Elimina
    5. A me sembra un layout assolutamente perfetto in quanto a larghezze
      http://i.imgur.com/7AUCwRv.png
      @#

      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.