Pubblicato il 21/02/11 - aggiornato il  | 38 commenti :

Come eliminare lo spazio superiore nei nuovi modelli di Blogger.

Come diminuire lo spazio vuoto nella parte alta del template.
Questo trucco non si rivolge solo a chi voglia cancellare lo spazio nella parte alta del template, dopo che è stata tolta la Navbar, ma a tutti coloro che vogliono modificarne le dimensioni in un senso o nell'altro.

 Ricordo che per eliminare la Barra di Navigazione nei template del Designer Modelli, si va su Design > Modifica HTML, si cerca il tag <body> e, immediatamente sotto, si incolla il seguente codice

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Nei modelli creati attraverso la finestra di progettazione di Designer, potrebbe non esserci il tag <body> ma uno simile a questo
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In ogni caso il codice precedente si incolla subito dopo. Con l'eliminazione della Navbar, nella parte alta potrebbe venire a crearsi un antiestetico spazio vuoto
spazio vuoto template designer modelli
Per toglierlo si va su Design > Modifica HTML e si cerca la riga  ]]></b:skin>. Immediatamente sopra si incolla questo codice
.content {
margin-top:-30px !important;
}
In cui viene usata la keyword !important; e si impone una diminuzione di 30 pixel nella parte alta del layout. Il valore può essere modificato secondo le esigenze del nostro template 
elimiato spazio vuoto nel template 
In alcuni modelli ci può anche essere l'esigenza inversa di avere più spazio perché abbiamo inserito un widget sopra l'intestazione che non si visualizza completamente. In questo caso è sufficiente togliere il segno meno davanti al valore che determina i pixel e il layout si allungherà di conseguenza.
eliminare la parte superiore del template
Come si può vedere nello screenshot precedente questa procedura può anche essere utilizzata in presenza della Navbar. In questo caso i pixel da togliere saranno ovviamente di meno.


38 commenti :

  1. Ciao, innanzitutto Grazie per i preziosi consigli, tutti molto utili.
    Avrei una richiesta:
    1. è possibile modificare-ridurre lo spazio tra la Data e il Titolo del Post?

    2. è possibile ridurre lo spazio tra il Titolo del Post e l'inizio dell'articolo del Post?

    Mi riferisco ai nuovi modelli di Blogger in particolare al Simple.

    Spero di ricevere indicazioni, ringrazio per la disponibilità.

    RispondiElimina
  2. @Mestieri Souvenir
    Prova a cercare questa classe
    .date.header ..{ che riguarda la data
    e
    h3.post-title {
    che è quella del titolo.
    Dovrebbero essere presenti dei margini tipo
    margin: .75em 0 0;
    Il primo numero è la distanza tra gli elementi potresti provare a diminuirla. Prima di queste modifiche salva sempre il template.
    Ciao

    RispondiElimina
  3. @Ernesto T.
    ciao ernesto
    sai volevo chiedere se possibile eliminare questo spazio bianco in mezzo ai 2 gadget html
    ti allego la foto https://picasaweb.google.com/scelzen/17Apr2011?authkey=Gv1sRgCLfD18yGv7yzYQ#5599504847404951266

    RispondiElimina
  4. Si tratta della pagina del Design > Elementi pagina. La vedi solo tu! Dipende dalla intestazione che hai inserito ma non è un problema

    RispondiElimina
  5. @Ernesto T. quel spazio nella foto e pure quello bianco che vedi tra sidebar menu e lo slideshow, io voglio che lo slideshow sia vicino al sidebar menu
    che quell spazio bianco in mezzo venga eliminato guarda il sito per capire meglio http://mondotorrent.blogspot.com/ grazie mille

    RispondiElimina
  6. @denny Ho capito ma non è che sono un mago, magari! Non so perché ci sia uno spazio. Si può tentare di toglierlo agendo sui margini (top e bottom) degli elementi interessati ma è un lavoro difficile.

    RispondiElimina
  7. @Ernesto T.purtroppo e il codice che non riesco a trovare!!! kmq grazie mille ernesto già i tuoi post mi hanno aiutato tantissimo non sei uno mago, ma sei uno in gamba ;-)

    RispondiElimina
  8. Ciao Ernesto,
    ho creato un blog con il modello semplificato, ho tolto il flag a tutti i parametri del blog ma rimane uno spazio antiestetico tra un post e l'altro. Si puo' eliminare? Grazie in anticipo.

    RispondiElimina
  9. @anastasiasas
    Si può fare però non è cosa semplicissima. Seguimi i prossimi giorni vedrò di farci un post (senza impegno)

    RispondiElimina
  10. ciao ernesto io avevo un problemino..in questa pagina http://www.reggaetonitalia.com/p/radio-reggaeton-94-fm.html mi appare lo sfondo bianco mentre nelle altre no come mai?

    RispondiElimina
  11. @Pizarro Dj
    Onestamente non ti saprei dire con certezza. Forse dipende da questo codice
    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;
    height: 276px;
    width: 100%;
    background: transparent none repeat-x scroll top left;
    _background-image: none;
    }
    che impedisce la visualizzazione dell'immagine di sfondo nella parte esterna del blog.

    RispondiElimina
  12. Ciao Ernesto,
    grazie per gli ottimi consigli che condividi. Avrei bisogno di un aiuto: ho rifatto l'immagine dell'header, ho levato la navbar ma mi è rimasto un vecchio logo in alto a sinistra che non mi ricordo come si possa levare e ci sto battendo la testa. Hai qualche idea? Per verificare il problema il sito è http://www.coachtive.com/ Grazie in anticipo.

    RispondiElimina
  13. @GianlucaTesta
    Mi hai dato l'indirizzo di un sito in cui c'è un iframe. Il blog si trova qui
    http://www.gianlucatesta.blogspot.com/
    e non c'è nessun residuo di header. Non capisco perché non hai fatto un semplice cambiamento di dominio con Google o con la modifica dei DNS.

    RispondiElimina
    Risposte
    1. Grazie, purtroppo sono passati diversi anni e non avevo fatto io la gestione dei domini. Pensavo ci fossero solo dei redirect. Comunque ora so in che direzione procedere. Buon lavoro, Gianluca.

      Elimina
  14. Ciao Ernesto senza il tuo prezioso aiuto....non so come si farebbe. Ti scrivo perchè vorrei ridurre lo spazio tra header e bordo superiore ma non trovo col motore di ricerca ctrl F la stringa ]]>. Non risulta proprio. E' possibile ridurre lo spazio tra header e post? grazie per l'aiuto e saluti, D.

    RispondiElimina
    Risposte
    1. @DonatelloAmabile
      La riga in questione c'è per forza. E' il tag di chiusura dei fogli di stile. Prova a incollare questa stringa dopo aver pigiato su F3 o Ctrl+F
      /b:skin
      e vedrai che la trovi.
      Per diminuire lo spazio prova a incollare sopra quella riga questo codice

      .header-inner {
      margin-bottom:-30px !important;
      }

      Se non funzionasse prova a trovare la classe di stile giusta al posto di header-inner attraverso lo strumento Firebug
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html

      Elimina
  15. Io invece nel mio www.interclubacquaviva.blogspot.com ho nella parte superiore un antipatico spazio tra header e icone social. E' possibile "mago ernesto" ridurlo?

    Grazie infinite

    RispondiElimina
    Risposte
    1. @fr@ncesco_qci_
      Segui questi due post
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html

      Elimina
  16. fatto anche questo ,grazie come sempre!

    RispondiElimina
  17. Ciao. Ho trasformato (anche visivamente) il blog in sito. La ciliegina sulla torta sarebbe poterlo staccare un po' dal margine superiore e ottenere uno stacco maggiore che non soltanto eliminando la navbar. Grazie. Ciao

    RispondiElimina
    Risposte
    1. @Horsepower
      Invece di valori negativi metti valori positivi per esempio

      .content {
      margin-top:60px !important;
      }

      Elimina
  18. Probabilmente c'è stato un problema e il mio commento non è partito.
    Non avevo letto con attenzione l'articolo. Ho risolto. Grazie. Ora l'ultima cosa che vorrei chiederti è questa:
    posso eliminare la navbar lasciando però la scritta "entra" in modo da potere effettuare l'accesso o spostare o inserire tale scritta in un altro punto del blog o sostituirla con un bottone o simili? Grazie. Ciao. Francesco

    RispondiElimina
  19. @Horsepower
    Prova con questo
    http://www.ideepercomputeredinternet.com/2012/03/come-visualizzare-un-pannello-di.html

    RispondiElimina
  20. Ciao Ernesto.
    Ho risolto rendendo invisibile la navbar come ci hai spiegato e in effetti lo spazio ottenuto mi soddisfaceva. Non ho quindi avuto bisogno di aumentarlo. Per quel che riguarda l'accesso lo faccio cliccando sul link blogger in basso che di fatto equivale al link "entra". Grazie per il tuo prezioso aiuto. Ciao. Francesco

    RispondiElimina
  21. Ciao.
    Sei sempre una miniera di informazioni. Hai per caso spiegato da qualche parte come caricare uno sfondo (dall'esterno: trama, disegni, ecc.) nella parte interna del template(
    per intenderci la parte su cui è apparecchiato il blog)? grazie. Ciao

    RispondiElimina
  22. Celo una domanda:come eliminare o ridurre spazio tra titolo blog e menu ( l'elenco delle pagine)del blog ???

    RispondiElimina
    Risposte
    1. @colorbis@yahoo.it
      Prova a seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html

      Elimina
  23. Ciao Ernesto forse perchè un post vecchio ma quel codice per togliere lo spazio antiestetico penso non funzioni piu' fatto in quel modo con ctrl+ f non lo trova nemmeno ne ho trovato uno così e un'altro simile ho provato a posizionare sopra sotto in mezzo il tuo codice ma nulla come anteprima della modifica si vedeva nello spazio antiestetico il tuo codice scritto piccolo in bianco :( mi puoi aiutare magari è cambiato qualcosa. Merci http://lamiacasettadizucchero.blogspot.it/

    RispondiElimina
    Risposte
    1. Prova a inserire nello stessa posizione indicata nel post questo codice
      #navbar {height:0px !important;}
      Se funziona al posto di 0px puoi mettere un altro valore. Se non funziona prova con questo
      #navbar {display:none;}
      @#

      Elimina
  24. Ciao Ernesto!
    Grazie ancora una volta...
    Sai come posso inserire nella stessa riga l'elenco delle pagine e la casella di ricerca?
    Ho provato a dividere in due l'header seguendo un altro tuo post ma qualcosa non fila liscio...

    RispondiElimina
    Risposte
    1. Mi sembra una cosa piuttosto difficile.. Per inserendo la casella di ricerca nel menu ti conviene sceglierne uno nuovo.
      @#

      Elimina
    2. Ma se invece io voglio aggiungere uno spazio tra il menu e il banner che ho messo in Home page cosa devo inserire? Ho provato con < d i v con < b r > , & n b s p ; & # 1 60; ma non funziona il menu continua a risultare appiccicato al banner ovviamente qui ho staccato il codici sennò non mi faceva pubblicare il commento

      Elimina
    3. Prova con questo codice
      <div style="margin-top: 20px;"/>
      calibrando il numero di pixel necessari
      @#

      Elimina
  25. Da inserire Dove prima del banner o all'interno del codice del menu o ancora su b-Skin

    RispondiElimina
    Risposte
    1. Tra i codici dei due elementi che vuoi separare con uno spazio
      @#

      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