Come creare una header animato in GIF con testo per Blogger.

Come creare un header animato per Blogger e posizionarci sopra il nome del blog al millimetro (o al pixel).

Nell'articolo precedente abbiamo visto come si possano inserire i codici delle immagini nei campi solitamente usati solo per il testo che riguardano il Nome e la Descrizione del blog oltre al Titolo del post. In quest'articolo vedremo invece una delle possibili applicazioni di questa funzionalità. Se andate su Layout > Intestazione > Modifica > Scegli file possono essere caricate anche immagini in formato GIF da sostituire al titolo e alla descrizione o da inserire come background della intestazione.

Le opzioni possibili sono infatti Dietro titolo e descrizione, Al posto do titolo e descrizione, Fai seguire questa immagine da una descrizione e infine Riduci e adatta. Per la mia esperienza non sempre le immagini caricate nell'Header di Blogger conservano perfettamente il proprio aspetto. Questo può dipendere anche dal miglioramento automatico di Google+. Nel caso abbiate delle difficoltà a visualizzare correttamente delle immagini nel vostro header su Blogger potete seguire questo procedimento alternativo.

Questo sistema può essere usato anche quando non si riesce a centrare bene il nome del blog nell'Header se questo viene inserito come testo e non sia presente nella stessa grafica della intestazione. Per prima cosa ovviamente dovremo creare l'immagine dell'header, caricarla su Picasa e prendere nota del suo URL diretto. Visto che esiste un limite di 100 caratteri per il titolo del blog bisogna accorciare questo indirizzo web tramite un servizio tipo goo.gl.  Si va poi su Impostazioni > Di Base > Titolo > Modifica e incolliamo un codice come questo

<center>TITOLO BLOG</center><img src="http://goo.gl/014Ni4">

dove l'URL in rosso è l'indirizzo della immagine accorciato con goo.gl.

Si va su Salva modifiche e vedremo che l'immagine animata si vedrà sotto il titolo del blog

Per mostrare il nome del blog al di sopra alla intestazione dobbiamo andare su Modello > Modifica HTML e cercare la riga ]]></b:skin> con Ctrl+F. Subito sopra a questa va incollato questo codice

h1.title img {
   position: relative;
   }
h1.title center {
   position: absolute;  
   top: 50px;
   left: 200px;
   z-index:9999; 
    }

Si salva il modello. Attraverso i parametri  top: 50px; e left: 200px; possiamo settare la distanza del testo rispettivamente dalla parte alta e dalla parte sinistra in modo da posizionarlo esattamente nel punto desiderato in questo modo

Questa procedura può essere anche usata quando non si possa inserire graficamente in modo semplice il titolo sulla immagine di intestazione come per esempio per quelle animate e si voglia posizionare il nome del blog in modo personalizzato.