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>
#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='"loading" + 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
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;
}
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
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.
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.
Ciao, innanzitutto Grazie per i preziosi consigli, tutti molto utili.
RispondiEliminaAvrei 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à.
@Mestieri Souvenir
RispondiEliminaProva 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
@Ernesto T.
RispondiEliminaciao 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
Si tratta della pagina del Design > Elementi pagina. La vedi solo tu! Dipende dalla intestazione che hai inserito ma non è un problema
RispondiElimina@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
RispondiEliminache quell spazio bianco in mezzo venga eliminato guarda il sito per capire meglio http://mondotorrent.blogspot.com/ grazie mille
@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@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 ;-)
RispondiEliminaCiao Ernesto,
RispondiEliminaho 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.
@anastasiasas
RispondiEliminaSi può fare però non è cosa semplicissima. Seguimi i prossimi giorni vedrò di farci un post (senza impegno)
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@Pizarro Dj
RispondiEliminaOnestamente 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.
Ciao Ernesto,
RispondiEliminagrazie 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.
@GianlucaTesta
RispondiEliminaMi 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.
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.
EliminaCiao 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@DonatelloAmabile
EliminaLa 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
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?
RispondiEliminaGrazie infinite
@fr@ncesco_qci_
EliminaSegui 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
fatto anche questo ,grazie come sempre!
RispondiEliminaCiao. 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@Horsepower
EliminaInvece di valori negativi metti valori positivi per esempio
.content {
margin-top:60px !important;
}
Probabilmente c'è stato un problema e il mio commento non è partito.
RispondiEliminaNon 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
@Horsepower
RispondiEliminaProva con questo
http://www.ideepercomputeredinternet.com/2012/03/come-visualizzare-un-pannello-di.html
Ciao Ernesto.
RispondiEliminaHo 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
Ciao.
RispondiEliminaSei 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
@Horsepower
EliminaLo farò a breve
Grande. Grazie di cuore.
EliminaCelo una domanda:come eliminare o ridurre spazio tra titolo blog e menu ( l'elenco delle pagine)del blog ???
RispondiElimina@colorbis@yahoo.it
EliminaProva a seguire questo tutorial
http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
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/
RispondiEliminaProva a inserire nello stessa posizione indicata nel post questo codice
Elimina#navbar {height:0px !important;}
Se funziona al posto di 0px puoi mettere un altro valore. Se non funziona prova con questo
#navbar {display:none;}
@#
Ciao Ernesto!
RispondiEliminaGrazie 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...
Mi sembra una cosa piuttosto difficile.. Per inserendo la casella di ricerca nel menu ti conviene sceglierne uno nuovo.
Elimina@#
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
EliminaProva con questo codice
Elimina<div style="margin-top: 20px;"/>
calibrando il numero di pixel necessari
@#
Da inserire Dove prima del banner o all'interno del codice del menu o ancora su b-Skin
RispondiEliminaTra i codici dei due elementi che vuoi separare con uno spazio
Elimina@#
Niente non funziona
RispondiElimina