Come creare e aggiungere una firma automatica sotto i post di Blogger anche con più autori.

Come mostrare in modo automatico una firma anche animata alla fine di tutti i post di Blogger anche in un blog con più autori.

Riprendo una personalizzazione che dai commenti ritengo abbia il gradimento di molti lettori. Si tratta di inserire una firma dell'autore alla fine di tutti gli articoli in modo automatico. La firma può essere creata interamente da noi utilizzando un programma di grafica quale Photoshop o Gimp oppure può essere generata con dei tool online.

Alla fine si otterrà una immagine che dovrà essere caricata su Picasa e di cui si dovrà ottenere il link diretto. La firma può essere classica e statica oppure può anche essere animata. Si possono inoltre aggiungere dei tag condizionali per mostrare la firma giusta sotto a ciascun post qualora il blog su Blogger abbia più di un autore. 

COME CREARE UNA FIRMA STATICA CON MYLIVESIGNATURE

Se si desidera una firma classica ma molto ben personalizzata conviene usare il servizio MyLiveSignature. Dopo l'apertura della pagina dello strumento si clicca su Create Signature

Si digita il nome e cognome oppure l'username con cui vogliamo firmare i post quindi si va su Next Step. Nella pagina successiva si scelgono i caratteri della firma

Ci sono 120 font che possono essere navigati cliccando sui bottoni posti in alto. Si va ancora su Next Step e si sceglie la dimensione dei caratteri della firma. Dopo un nuovo Next Step si sceglie il colore della stessa e il suo background. Di default il colore di background è Trasparente mentre il colore della firma è Nero. Per le modifiche si devono inserire dei codici dei colori diversi. Dopo un nuovo Next Step si sceglie l'inclinazione (slope) verso l'alto della stessa firma. Dopo l'ultimo Next Step potremo scaricare la firma cliccando sull'apposito link. L'immagine sarà in formato PNG e dovrà essere caricata su Picasa.

COME CREARE UNA FIRMA ANIMATA CON GIFMANIA

I più creativi possono creare una firma animata in formato GIF utilizzando per esempio il tool GIFMania Animated Signature. Si digita il testo, si sceglie il tipo di font e la sua dimensione e poi il colore della firma. Infine si aggingono anche delle animazioni. Si va quindi su Create

Nella pagina che si apre si va su Download this Signature

Il file in formato GIF dovrà essere caricato su Picasa e se ne dovrà ottenere il link diretto.

COME INSERIRE L'IMMAGINE DELLA FIRMA NEL MODELLO DI BLOGGER

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

quindi si scorre il codice verso il basso fino a trovare il blocco di codice del Read More 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/</a>
      </div>
    </b:if>

Subito sotto a questo blocco si incolla questo nuovo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='firma'>
       </div>
</b:if> </b:if>  

Adesso si cerca la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

.firma {
height: 48px;
background: transparent url(URL_IMMAGINE_FIRMA) center no-repeat;
}

Si salva il modello. Il parametro height: 48px; può essere settato in funzione della dimensione della firma. Le due righe evidenziate di giallo servono per non mostrare la firma nelle pagine statiche. L'allineamento della firma center può essere sostituito da left o right con ovvio significato.

Demo Clicca qui

COME INSERIRE FIRME DIVERSE NEI BLOG CON PIÙ AUTORI

Quando in un blog pubblicano più autori è necessario mostrare la firma dell'autore che ha pubblicato quel dato post. Dobbiamo quindi creare delle condizioni per associare ciascuna firma a un nome. Ricordo che i nomi degli autori sono case sensitive e che quindi le maiuscole sono diverse dalle minuscole. Inizialmente si dovranno creare tante firme quanti solo gli autori. I codici si incollano con la stessa modalità e nella stessa posizione di quelli precedenti. Facciamo l'esempio di soli due autori. Il primo codice diventa

<b:if cond='data:post.author == &quot;Autore1&quot;'>
<div class='firma1'>
       </div>
      </b:if>   
<b:if cond='data:post.author == &quot;Autore2&quot;'>
<div class='firma2'>
       </div>
      </b:if>

dove sono state create le due classi di stile firma1 e firma2. Al posto di Autore1 e Autore2 vanno digitati gli stessi nomi utente di Blogger anche con possibili spazi. Per esempio nel mio caso

<b:if cond='data:post.author == &quot;Ernesto Tirinnanzi&quot;'>

Il secondo codice da incollare sopra a ]]></b:skin> in questo caso diventa

.firma1 {
height: 48px;
background: transparent url(URL_FIRMA_AUTORE1) center no-repeat;
}
.firma2 {
height: 48px;
background: transparent url(URL_FIRMA_AUTORE2) center no-repeat;
}

con le stesse personalizzazioni già viste in precedenza. Nel caso di tre o più autori si dovranno aggiungere altre regole di stile per firma3, firma4, ecc mantenendo la stessa sintassi.