Come inserire un widget HTML al posto dell'header di Blogger.

La piattaforma Blogger dà la possibilità di caricare una immagine da visualizzare al posto del nome del blog e della sua descrizione o anche insieme alle due cose. Per effettuare la modifica si va su Design > Elementi pagina e si pigia su Modifica nel gadget che riguarda l'intestazione del blog

L'immagine può essere caricata selezionandola dal computer oppure dal web. Sono presenti varie opzioni di configurazione

1. Dietro il Titolo e la Descrizione nel senso che saranno visti tutti e tre gli elementi
2. Al posto di Titolo e Descrizione
3. Fai seguire l'immagine da una descrizione nel senso che viene messa al posto del solo nome del blog
4. Riduci e adatta per rendere le dimensioni della immagine compatibili con quelle dell'header
5. Si clicca su Salva per rendere operative le modifiche

Come vedete manca sulla destra il pulsante Rimuovi perché di default non è possibile eliminare questo elemento. Se volessimo inserire nell'header una immagine animata, un video, uno slideshow o comunque qualcosa di più complesso di una semplice immagine, con le impostazioni predefinite sarebbe impossibile. Vediamo come ovviare a questo inconveniente.

Per prima cosa bisogna inserire l'elemento Aggiungi un gadget nella zona dell'Header in modo da poter inserire un altro elemento HTML/Javascript. Seguendo la stessa falsariga del post linkato, operiamo nella stessa zona del template attraverso queste modifiche. Il codice all'inizio sarà simile a questo

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='Titolo Blog (Intestazione)' type='Header'/>
</b:section>

che va modificato in questo modo

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='false' title='Titolo blog (Intestazione)' type='Header'/>
</b:section>

dove le modifiche sono state evidenziate di rosso. Il numero 2 può anche essere cambiato con uno più grande. Inserite un altro header andando su Aggiungi un gadget > HTML/Javascript e incollando il codice che volete vedere nella intestazione del sito. Se si tratta di una semplice immagine animata dovrà essere preventivamente caricata su un hosting quale Picasa, SkyDRive o DropBox e ne dovrà essere acquisito l'URL. Il codice da incollare in Sezioni del sito dell'elemento HTML/Javascript sarà in questo caso del tipo

<a href=http://nomesito.blogspot.com/ title="Titolo" alt"Nome blog"><img src="URL IMMAGINE"></a>

Dopo averlo salvato e posizionato si può ritornare su Design > Elementi pagina. Andando su Modifica nella intestazione sarà adesso visibile il pulsante Rimuovi per la sua eliminazione.

Raccomandazioni finali: prima di effettuare questa modifica salvare il modello completo e metterlo in una cartella per eventualmente ritornare alla situazione precedente. E' opportuno visualizzare il blog prima di procedere alla cancellazione della intestazione originale.

Questa modifica non dovrebbe avere nessuna rilevanza dal punto di vista SEO perché se andate su Impostazioni sarà sempre presente il Titolo del Blog e la sua Descrizione che avete inserito all'atto della sua pubblicazione. In ogni caso è opportuno inserire la descrizione del blog anche nel modello. Nel template sarà comunque sempre presente la riga <title><data:blog.pageTitle/></title> o  una simile,  che indicherà inequivocabilmente il titolo del blog.

Se volete ripristinare l'intestazione originale, cambiate template con il Designer Modelli scegliendone  uno qualsiasi. Dopo aver cliccato su Applica al blog, cambiate nuovamente modello tornando a quello di partenza. L'intestazione originale sarà nuovamente presente

sotto a quella personalizzata.