Come inserire un header animato in un blog su Blogger.

Per cambiare l’intestazione (o header) del blog basta andare su Layout > Elementi pagina > cliccare su Modifica ed inserire un’immagine. L’immagine può essere posta dietro titolo e descrizione o al posto del titolo e della descrizione.

Se si inseriscono immagini animate in formato GIF queste verranno regolarmente acquisite da Blogger ma rimarranno inanimate. Vediamo come fare per costruirsi un header che si muova. Prima alcune precisazioni

1. Non tutti i modelli hanno la sezione header (il modello di questo blog non ce l’ha) quindi la personalizzazione sarà possibile solo nei casi in cui sia presente
2. Alcuni template hanno già degli header animati e ovviamente non hanno bisogno di questo mini-tutorial

Creiamoci un header animato andando nello strumento gratuito Flaming Text, che può servire anche per altre realizzazioni. Andiamo p.e. nella sezione Glitter e inseriamo il testo, scegliamo la dimensione dei font, il tipo di font, quindi andiamo su Create Logo. Dopo 15 secondi l’immagine sarà pronta e potrà essere scaricata cliccando sul destro del mouse. Ecco quella che ho realizzato

 

Volendo questa immagine può anche essere ridimensionata attraverso uno di questi due tool per adattarla alla larghezza del modello.

Adesso carichiamo l’immagine su un hosting gratuito tipo Skydrive e acquisiamone l’indirizzo. Passiamo adesso a operare sul modello e andiamo su Layout > Modifica HTML, scarichiamo un modello completo e mettiamo la flag ad espandi modelli widget.

Cerchiamo la sezione di codice simile a questa

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

e modifichiamola in questo modo

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

come mostrato in questo screenshot

Salvare il modello dopo aver fatto le due piccole modifiche colorate di rosso. Adesso se andiamo in Layout possiamo vedere che accanto all’intestazione c’è un Aggiungi un Gadget che prima non c’era

Per effettuare il test ho utilizzato il blog Video & Video che adesso ho tralasciato. Adesso cliccate su Aggiungi un gadget > HTML/Javascript ed inserite questo codice

<center><img src="http://is.gd/1R9kW"/></center>

dove al posto dell’URL colorato di rosso inserite l’indirizzo dell’immagine che avete caricato sull’hosting. Il tag center serve ovviamente per centrare l’immagine nel blog. Adesso il vostro blog avrà due header e si presenterà più o meno così

Dobbiamo quindi eliminare l’intestazione originaria andando su Layout, quindi su Modifica infine su Rimuovi per quanto riguarda l’intestazione originaria.

In alternativa possiamo lasciare entrambe con un’immagine nell’intestazione precedente ed un testo glitterato immediatamente sopra o immediatamente sotto.

In questo caso non occorrerà modificare il modello ma basterà inserire il codice dell’immagine, delimitato dai due tag center, in un elemento pagina e posizionarlo sopra o sotto l’header quindi salvare il tutto.