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)

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.

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

Di 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

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.