Pubblicato il 28/07/09 - aggiornato il  | 5 commenti :

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

showaddelement

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

image

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ì

image

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.



5 commenti :

  1. bellissimna idea..

    RispondiElimina
  2. ah ti invito..in un nuovo spazio al di la', dei confini reali..fammi sapere quando passi..
    Lollarandia

    ciao

    RispondiElimina
  3. Ciao e complimenti...io ho provato a farlo,ho messo un'immagine,ma non riesco a rimuovere l'intestazione originale...o meglio,non c'è l'opzione "rimuovi"...se mi puoi aiutare...grazie in anticipo!

    RispondiElimina
  4. Evvai sono riuscito a risolvere il problema...anche se ho dovuto intervenire direttamente sull'html...complimenti di nuovo e a presto!=)

    RispondiElimina
  5. grazie parsifal come al solito con te diventa tutto piu' semplice,sei il top.

    RispondiElimina

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