Creare una firma animata con icona e inserirla alla fine di ogni articolo.

Ho già trattato diverse volte il tema di come firmare i post su Blogger e anche di come mettere delle firme diverse a seconda dell'autore dell'articolo. Adesso voglio mostrare come creare una firma animata personalizzata con icona e come inserirla nei blog di Blogger. In rete si possono trovare diversi servizi ma quello che ho trovato più interessate e completo è stato GIF-Mania Your Animated Signatures.

Si creano firme animate in quattro passaggi scegliendo ovviamente il testo, la famiglia di caratteri, il colore della firma e una icona che ne accompagni l'animazione. Usando per esempio una matita come icona si ha un effetto particolarmente suggestivo.

 

Molte icone sono già disponibili sul sito ma, se si vuole una cosa originale, è meglio andare sulla destra e cliccare su Your own figurines per caricare una immagine personale. Dovrà essere necessariamente in formato GIF e più piccola di 150 pixel. Per ricavare una icona trasparente da una foto si può usare il programma Gimp per eliminarne lo sfondo. Dopo aver caricato l'icona su GIF-Mania Your Animated Signatures, è importante selezionare il punto di scorrimento della firma mediante il click del mouse

 

Una manchevolezza del sito è quella che non si possono inserire i codici dei colori ma la tonalità della firma può essere scelta solo mediante il mouse nella apposita tavolozza. Dopo aver selezionato anche il tipo di font usufruendo anche della pratica anteprima, si clicca su Create per realizzare la nostra firma personalizzata. Questa può essere scaricata cliccando su Download this signature.

Si tratta di una immagine animata in formato GIF che dovrà essere caricata su Picasa per acquisirne in seguito il link diretto. Ecco un esempio

 

Adesso vediamo come inserirla alla fine di ciascun articolo su Blogger. Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget e cercate la riga

<data:post.body/>

Subito sotto incollate questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:center;'>
<span style="float: right;"><img src='URL IMMAGINE FIRMA' />
</span></div>
</b:if>
</b:if>

Salvate il modello. La prima riga impone la condizione che la firma sia visibile solo nei singoli elementi (post e pagine statiche) e la seconda che non sia visibile appunto nelle pagine statiche. In questo modo la firma animata sarà visibile solo nei post sulla destra del layout, se si vuole visualizzare a sinistra si sostituisce right con left. Se si vuole avere la firma centrale si può usare questo codice da incollare nella stessa posizione

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:center;'>
<div style="text-align: center;"><img src='URL_Immagine' />
</div></div>
</b:if>
</b:if>

Tale codice può essere utilizzato alternativamente al precedente anche per posizionare la firma a sinistra e a destra sostituendo center con left o right. Come è mia abitudine ho postato una demo nel blog della Pagina di Benvenuto

• Demo della firma animata -

Osservazione conclusiva: La zona in cui si inserisce la firma è la stessa in cui si possono avere installato degli annunci pubblicitari, dei bottoni di voto, il Mi Piace di Facebook, il bottone ufficiale di Twitter e altra roba. Credo però che dal punto di vista estetico la firma debba essere messa per prima per visualizzarsi subito alla fine del post. Al posto di una firma animata nulla vieta di inserire una immagine di una firma statica in JPG o PNG.