Pubblicato il 25/04/11 - aggiornato il  | 62 commenti :

Come centrare l'immagine dell'intestazione (o header) in Blogger.

Come centrare l'intestazione o header di un blog su piattaforma Blogger.
Dopo aver illustrato come eliminare le sidebar dalle pagine statiche, affronto un altro tema molto gettonato nei commenti, nelle email e nel modulo di contatto. Centrare l'immagine che abbiamo scelto per l'header di un blog su Blogger è una operazione che dovrebbe essere di routine ma che invece è tutt'altro che scontata. Si può cercare di ridimensionare l'immagine per farla diventare della stessa larghezza del layout ma non c'è un comando specifico per poterla centrare. Da una rapida ricerca, anche con keyword di lingua inglese, non ho trovato niente di interessante che non abbia appunto come base la modifica delle dimensioni dell'header.

Ho messo quindi a punto due procedimenti piuttosto brillanti e relativamente semplici. Entrambi portano a centrare l'immagine della intestazione. Non ci sono differenze sostanziali se non che con la prima procedura, per avere la certezza del funzionamento, dobbiamo conoscere l'URL dell'header. Chi è interessato può optare indifferentemente per il primo o per il secondo.

Primo procedimento per centrare l'header in un blog di Blogger

Per acquisire l'indirizzo dell'immagine dell'intestazione, andate sul vostro blog, cliccate con il destro del mouse sull'header e scegliete Copia URL immagine (OS Windows)

copia url immagine header blogger

Adesso aprite la sorgente pagina del blog. Con Chrome si clicca con il destro del mouse su una pagina qualsiasi e si sceglie Visualizza sorgente pagina. Con Firefox si va su Visualizza > Sorgente pagina nel menù orizzontale. Mentre con Internet Explorer 9 si clicca sul destro del mouse e si sceglie HTML. Con tutti e tre i browser si deve cliccare su F3 per visualizzare l'URL della immagine di intestazione che si è appena copiata.

url immagine intestazione
Prendete nota, a sinistra dell'indirizzo, dell'attributo con cui è stata denotata l'immagine dell'header. Nel caso di questo blog è  id='Header1_headerimg' . Per fare in modo che l'immagine venga centrata, bisogna andare su Design > Modifica HTML e cercare la riga ]]></b:skin>. Immediatamente sopra si incolla il codice

#Header1_headerimg {
display: block;
margin-left: auto;
margin-right: auto;
}

che centrerà l'immagine dell'header dopo che avrete salvato il template. Nel caso nel vostro modello ci fosse una classe nominata diversamente rispetto a Header1_headerimg,  inseritela al suo posto. 

Secondo procedimento per centrare l'immagine di intestazione

Se questo metodo non vi funzionasse o non vi piacesse, ne ho pronto un altro forse anche un po' più semplice. L'ho testato solo nel caso in cui si inserisce l'immagine al posto di Titolo e Descrizione ma penso che possa funzionare comunque. Prima di intervenire ecco come si presentava l'header

header blog su bloggerDi default infatti l'immagine della intestazione viene inserita sulla sinistra. Ho volutamente inserito una immagine piccola per rendere ancora più chiara la modifica grafica.  Andate su Design > Modifica HTML e espandete i modelli widget. Salvate il modello completo per un eventuale backup di ripristino. Cliccate su F3 e inserite la keyword di ricerca header-inner in modo da arrivare in breve tempo a trovare un codice simile a questo

<!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->


Come detto ho testato il codice nel caso in cui si sia scelto di inserire l'immagine al posto di Titolo e Descrizione del blog. Tale codice dovrebbe essere sostanzialmente lo stesso sia nei vecchi che nei nuovi template del Designer Modelli. Prestate attenzione alla stringa colorata di rosso

 style='display: block'

e sostituitela con quest'altra

style='display:block; margin-left:auto; margin-right:auto;'

in modo da ottenere un codice simile a questo

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display:block; margin-left:auto; margin-right:auto;' />

Salvate il modello. Se adesso andate a verificare la posizione dell'header, vedrete che è esattamente al centro del layout

centrare header del blog su blogger

Come detto, non c'è una ragione per preferire un metodo all'altro. Se avete intenzione di effettuare questa personalizzazione, usate pure quello che vi sembra più semplice e più nelle vostre corde. Non ci dovrebbero essere problemi di funzionamento con nessun template e l'immagine sarà vista centrata con tutti i browser più recenti.


62 commenti :

  1. ciao ernesto
    scusa per il disturbo
    ma io volevo chiedere se possibile centrare un widget!
    ho messo il widget di slider con immaggini Nivo Slider
    ma il problema e che sta più spostato verso la destra anche se nel corpo html ho meso la riga div"center"
    ecc ma su firefox e su explorer sta sempre spostato verso destra!
    ce magari qualche tuo post dove spieghi di come centrare i gadget? grazie mille

    RispondiElimina
  2. @denny I metodi per centrare un elemento sono elencati qui
    http://www.ideepercomputeredinternet.com/2009/09/come-centrare-un-testo-unimmagine-o-un.html
    poi se c'è un modello o un browser che fa le bizze...

    RispondiElimina
  3. Ciao Ernesto, ho utilizzato il secondo metodo e finalmente sono riuscita a centrare l'immagine dell'intestazione del mio blog, al primo tentativo, grazie mille pertanto e passa a visitare il mio blog insabbiando per vedere il risultato. Bravo e complimenti per il sito, ho inserito il tuo antipixel nel mio blog. Saluti, Teresa

    RispondiElimina
  4. @inSABBIAndo (l'arte) Felice di esserti stato di aiuto. Grazie per l'antipixel e... per il tuo blog che trovo molto interessante. Ciao

    RispondiElimina
  5. Ciao Ernesto, ho inserito nel blog uno degli sviluppatori di Facebook ( attività recenti ). E' un iframe ma non riesco a centrarlo nella sidebar. Hai qualche consiglio? Grazie

    RispondiElimina
  6. @Enzo
    Prova con uno di questi due sistemi

    Prova con uno di questi due sistemi

    <div style="display:block;float:center;">
    Codice del widget
    </div>
    oppure
    <div align="center">
    Codice del widget
    </div>

    RispondiElimina
  7. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  8. ciao, io ho risolto aggiungendo center nell'header-inner (a me nn era come quella ke hai messo tu nell'articolo ma mi è servito a capire cosa dovevo cercare)

    http://imageshack.us/photo/my-images/13/blogkz.png/


    solo ke ora il titolo è centrato proprio sull'immagine e vorrei metterglielo al lato sx o dell'immagine se fosse possibile, o rimetterlo dov'era... così com'è nn sta bene... :(

    http://mariele-amore-silvestro-tigre.blogspot.com/

    RispondiElimina
  9. p.s.: spero ke il link di imageshack a te funzioni, xkè ho provato a vedere se si vedeva bene ma a me si blocca chrome... :(
    se trovi il sistema di risistemare il mio titolo... ti ringrazio tanto... :)

    RispondiElimina
  10. @mariele
    Non so se ho capito bene. Vuoi lasciare l'immagine al centro ma mettere il titolo del blog a sinistra?
    Se è così cerca questo blocco di codice
    .Header h1 {
    font: normal bold 60px Corsiva;
    color: #616161;
    text-shadow: 2px 2px rgba(0, 0, 0, .1);
    }
    e inserisci una riga in questo modo
    .Header h1 {
    font: normal bold 60px Corsiva;
    color: #616161;
    text-shadow: 2px 2px rgba(0, 0, 0, .1);
    text-align:left;
    }
    Dovrebbe funzionare.

    RispondiElimina
  11. ciao ernesto, ho trovato utile questo post ma non ho le stesse stringhe che metti tu..io trovo queste:

    Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }


    riusciresti a dirmi come fare in questo caso per centrare l'immagine dell'header??grazie!!

    patchworkporter.blogspot.com

    RispondiElimina
  12. @Sabrina T.
    Se ho capito bene vuoi centrare questa immagine
    http://4.bp.blogspot.com/-gELbtlx76Wc/TWpcia0KzeI/AAAAAAAAASs/iAaVFvGJ-TQ/s1600/papsenzabordo.jpg
    Se è così cerca la riga
    ]]></b:skin>
    su Design > Modifica HTML e, subito sopra, incolla questo codice

    #Header1_headerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    Dovrebbe funzionare da quello che ho visto dal tuo sorgente pagina
    (http://patchworkporter.blogspot.com/)

    RispondiElimina
  13. Un genio!!
    Non so proprio come ringraziarti era da tempo che non trovavo la soluzione!!Ora è centrato!!grazie mille per la tua disponibilità Ernesto!!:)

    RispondiElimina
  14. @Sabrina T.
    Quale genio ... ^^ andiamo che mi metti in imbarazzo!

    RispondiElimina
  15. Ciao Ernesto, dopo una ricerca google lunghissima sono finalmente approdata qui, e dopo anni!! sono riuscita a centrare l'immagine dell'header del mio blog "I dipinti di Giada".

    Considerando che è dal 2009 che bazzico sull'assistenza di blogger, e non ci avevo mai cavato un ragno dal buco su questo argomento, sei davvero un grande!!!
    Grazie di cuore.

    RispondiElimina
  16. @Giada
    Non essere troppo severa con quelli che rispondono nel forum. Non sono dipendenti di Google, sono solo persone di buona volontà che cercano di aiutare secondo la loro esperienza e conoscenze, qualche volta modeste. Lo fanno comunque a titolo gratuito, quindi massimo rispetto.

    RispondiElimina
  17. Magico....grazie Ernesto....se non ci fossi bisognerebbe inventarti...
    Franco

    RispondiElimina
  18. E' normale che con il primo metodo ottengo un errore? Grazie.

    RispondiElimina
  19. purtroppo a me non riesce, il titolo rimane sempre sulla sinistra!

    RispondiElimina
  20. @Caterina Pili
    Se ti riferisci a questo blog
    http://catrina-cucinalight.blogspot.com/
    nell'intestazione non c'è una immagine ma una scritta con dei caratteri particolari (Dancing Script). Per centrare una scritta nell'header trova questo codice

    .Header h1 {
    font: normal normal 80px Dancing Script;
    color: #ea9999;
    text-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }

    e inserisci una nuova riga text-align: center; così

    .Header h1 {
    font: normal normal 80px Dancing Script;
    text-align: center;
    color: #ea9999;
    text-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }

    dovrebbe funzionare.

    RispondiElimina
  21. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  22. @Caterina Pili
    Il tuo codice lo conosco già. Ho visto il sorgente pagina. Prova a cambiare la riga da aggiungere in questo modo
    text-align: center !important;

    RispondiElimina
  23. scusami , ma non funziona, grazie lo stesso per la pazienza, e....purtroppo non sono esperta come te, ciao e buona giornata!

    RispondiElimina
  24. ciao! :) io invece ho un altro problema. Il mio header è troppo grande e quindi per visualizzare il blog serve la barra di scorrimento. Come faccio a ridimensionare l'intestazione in modo da essere grande quanto alla pagina del blog? sto impazzendo, non riesco! grazie in anticipo! :) ti lascio il mio link solo per renderti conto di ciò che voglio dire, http://blackpearlssecrets.blogspot.com/ grazie! :)

    RispondiElimina
  25. @Black Pearl
    Se l'header lo hai caricato tu, basta che ne scarichi una copia, e lo ridimensioni con Pixlr o un altro tool online
    http://www.ideepercomputeredinternet.com/2011/01/pixlr-per-modificare-foto-e-immagini.html
    per poi ricaricarlo di nuovo. Purtroppo dal sorgente pagina non riesco a vedere l'URL.

    RispondiElimina
  26. purtroppo l'header non è mio, il template è già fatto! facendoci caso nell'html, non risulta nemmeno un header, fa pate dello sfondo esterno! comunque grazie della risposta!

    RispondiElimina
  27. @Black Pearl
    Se è lo sfondo puoi cercare di ridurre la larghezza che è di 1000 pixel. E' un modello superpersonalizzato ma prova con questo
    http://www.ideepercomputeredinternet.com/2009/08/come-aumentare-la-larghezza-delle.html

    RispondiElimina
  28. ti ringrazio per il link, è molto utile... l'ho conservato perchè potrebbe servirmi in futuro ma purtroppo non sono riuscita a ridimensionare lo sfondo... ho tentato in tutti i modi ma nulla! grazie mille comunque per le risposte e grazie per la gentilezza e la pazienza! :) domani ci riprovo ma dubito... sarà un template superpersonalizzato come dici tu ...fa nulla! ciaooooo!

    RispondiElimina
  29. Ciao Ernesto! sono un ramingo di Splinder giunto su Blogger e ho cercato tre giorni di centrare il titolo e la descrizione del mio blog ma solo dopo averti trovato ci sono riuscito!

    grazie
    Lucas

    RispondiElimina
  30. Ciao Ernesto,
    sei un mito, le tue spiegazioni sono impeccabili.
    Ti illustro il mio problema: sto modificando l'header del mio blog lavorando sulle sezioni #header-wrapper e #outer-wrapper per diminuirne l'altezza ed aumentarne la larghezza. Con l'altezza sono a posto, ma con la larghezza non riesco ad ottenere il risultato sperato. Quello che vorrei ottenere è una header simile a quella di facebook, in pratica una riga alta 40 px e larga quanto lo schermo. Purtroppo però la header non arriva a toccare il lato dx e sx dello schermo, ma inizia tre millimetri dopo il lato sinistro e finisce tre millimetri prima del fianco destro del monitor. Sto provando a visualizzare il blog con vari pc/netbook ed il risultato è praticamente sempre lo stesso... Sai aiutarmi? Grazie anticipatamente in ogni caso! PandaZ

    RispondiElimina
  31. @Y-S.Com
    3 millimetri? Non mi sembra poi un grande problema :)
    Prova a sostituire il valore di width in #header-wrapper con 100% e elimina i margini se ci sono vale a dire metti
    margin-left:0px; margin-right:0px;
    Eventualmente puoi inserirli anche negativi
    margin-left:-10px; margin-right:-10px;

    RispondiElimina
  32. grazie, ho seguito il secondo metodo per centrare l'header e funziona; mi hai salvato dall'impazzire.
    Ottimo articolo, complimenti! :)

    RispondiElimina
  33. provato e riprovato... non c'e' verso con entrambi i metodi.. dove sbaglio ?
    ciao
    http://pimpe1967.blogspot.it/

    RispondiElimina
    Risposte
    1. @Pimpe
      Ho dato uno sguardo al tuo sorgente pagina. Non sono riuscito a trovare l'header. Ho trovato solo queste immagini
      http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa
      http://1.bp.blogspot.com/-CKNrlJidAzw/T0ejXAQn2MI/AAAAAAAAEwA/8PvJ51pNT6I/s0/calamita2011isola2.jpg

      Elimina
    2. Ciao Ernesto ho risolto con un aggiornamento del problema sempre dal tuo blog.

      http://www.ideepercomputeredinternet.com/2012/01/come-centrare-o-allineare-destra-l-o-il.html

      Volevo centrare l'immagine di intestazione , poi ho spostato anche il titolo e la descrizione ;-) .
      Se guardi il blog vedi ;-)
      Grazie 1000 !!

      Elimina
  34. @Viander
    Ti prego di postare i commenti in un solo articolo tanto li leggo lo stesso. Sul tuo sito ci sono dei link che portano a siti a pagamento. Il consiglio che ti do è quello di toglierli :)

    RispondiElimina
  35. Come sempre grazie dei consigli preziosissimi!

    RispondiElimina
  36. Grazie mille, finalmente dopo un'intera giornata sono riuscita a centrare l'immagine xD Grazie mille

    RispondiElimina
  37. Ciao Ernesto,
    prima di tutto grazie per tutti i consigli e la disponibilità.
    Sto restaurando il mio blog da zero.
    Ho provato a seguire tutti e due i metodi, ma niente da fare. tra l'altro nemmeno col metodo ctrl+f non riesco a trovare ]]>.
    Help!!!

    RispondiElimina
    Risposte
    1. @# Per trovare il codice leggi questa guida
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      Poi non è detto che i metodi illustrati funzionino ;(

      Elimina
  38. Ci ho messo un pò, ma ho intrecciato i due metodi per identificare più velocemente la striscia di codice interessata.
    Ottimo, grazie!

    RispondiElimina
  39. Io ho un codice per l'header esattamente uguale a quello scritto nel post.
    Voglio agire sulle dimensioni di questa immagine e sul posizionamento: attualemnte risulta troppo distante dal top, ho quindi provato a modificare il padding, ma niente, anche con valori negativi.
    E poi vorrei specificare le dimensioni dell'immagine, ma non riesco in nessun modo.
    Consigli?

    RispondiElimina
    Risposte
    1. Prova con questo sistema
      http://www.ideepercomputeredinternet.com/2011/02/come-eliminare-lo-spazio-superiore-nei.html
      @#

      Elimina
  40. Grande! Ho cercato ovunque prima di riuscire a spostare l' immagine al centro... tu sei stato il più chiaro!!! :):)

    RispondiElimina
  41. Bravissimo! come faremmo noi comuni mortali senza di te! Se mi credi con le tue istruzioni ho impiegato 2 minuti!

    RispondiElimina
  42. Fatto con il secondo metodo e funziona!! Grazie mille!

    RispondiElimina
  43. Complimenti ancora una volta per il tuo blog, c'è veramente TUTTO quello che può servire per personalizzare blogger... metodi funzionanti ed esempi chiarissimi.
    Grazie!

    RispondiElimina
  44. Buongiorno ernesto,
    ho cercato di risolvere la problematica del sostituire l intestazione del blog con un immagine e centrarla, con le due soluzioni che hai indicato sopra ma il risultato non cambia: l immagine sembra essere spostata a destra.
    Il blog è tortebiscotti.blogspot.it. Se potessi darmi un aiutino te ne sarei grato.
    Ciao

    RispondiElimina
    Risposte
    1. @# Potresti aggiungere alla immagine una parte trasparente per centrarla in quel modo. Però credo che il tuo sia un problema di browser. Con Firefox l'immagine è centrata, con Chrome no. Procedi in questo modo.
      1) Aggiungi una riga al modello per renderlo compatibile con IE e Chrome
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      2) Prova a aggiungere questo codice con le modalità illustrate di questo post
      img#Header1_headerimg {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      Elimina
    2. Ciao Ernesto di nuovo,
      grazie prima di tutto per la celere risposta. Io le modifiche le ho fatte ma a quanto pare non hanno sortito nessun buon effetto ahime!

      Elimina
  45. Ciao Ernesto, e per aumentare il margine superiore ed inferiore? Io ho provato ad aggiungere alla stringa della seconda opzione margin-top:numero e margin-bottom:numero, ma nulla.

    RispondiElimina
    Risposte
    1. Prova a aggiungere questo codice
      #header-inner {margin-top:30px; margin-bottom:30px;}
      subito sopra alla riga con /b:skin come indicato nel primo procedimento
      @#

      Elimina
  46. Ciao Ernesto ,come la ragazza sopra a me non funziona ne il primo ne il secondo procedimento

    ecco il sito http://infoutili.blogspot.it/

    ed ecco il codice :

    #PageList1 {margin-top:-18px !important; margin-bottom:-13px !important;
    }
    #Header1_headerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    ]]>

    la prima stringa era per diminuire i margini tra menu' e logo come da tua guida

    RispondiElimina
    Risposte
    1. @# Il codice è sbagliato la riga finale ]]> non ci deve essere, hai copiato male nel template. Prova con questo CSS
      #header-inner, #header-inner > a {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }
      .

      Elimina
  47. Buonasera Ernesto,
    Complimenti per il tuo blog pieno di tutorial chiarissimi, molto utili per me che sto costruendo il mio blog da zero. Per centrate l'immagine ho uttilizzato il secondo metodo è stato facilissimo. Grazie!

    RispondiElimina
  48. Ciao Ernesto, scusa se commento qui ma non so se hai scritto un post apposito: io vorrei centrare le etichette dei post, quelle subito sotto la data e il titolo, come posso fare? Grazie!

    RispondiElimina
    Risposte
    1. Prova a incollare questo codice
      .post-labels, .post-labels span {text-align:center;}
      subito sopra alla riga ]]></b:skin>
      @#

      Elimina
  49. Grazie mille, questa spiegazione é stata utilissima. Era da un'eternità che volevo centrare nel blog l'header, ma tutte le spiegazioni che trovavo su internet, erano incomprensibile. Ho usato la seconda opzione, perché avendo solo il cellulare disponibile, la prima mi era impossibile da eseguire. Ci ho messo un'eternità a trovare il codice 😄 ma c'è lo fatta. Grazie mille

    RispondiElimina
  50. grazie mille! Come sempre quando ho bisogno di qualchemodifica su blogger il tuo blog è una manna dal cielo! Per sbaglio avevo rimosso il widget dell'header e quando l'ho rimesso non era più centrato argh! Con questo codice funziona(ho usato il secondo) ma ho un problema da mobile l'immagine resta grande e va di lato, come posso adattarla?

    RispondiElimina
    Risposte
    1. Ho affrontato questo tema in almeno due post. Con il primo si possono mostrare due header diversi da mobile e da desktop
      https://www.ideepercomputeredinternet.com/2017/10/blogger-header-desktop-mobile.html
      Con il secondo si può invece nascondere l'header da mobile
      https://www.ideepercomputeredinternet.com/2016/11/blogger-header-mobile-media-screen.html
      soluzione che ho adottato anche in questo sito e che velocizza l'apertura da smartphone delle pagine
      @#

      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