Come aggiungere una firma automatica su Blogger.

Come inserire una firma alla fine di ciascun articolo di Blogger. Come creare la firma online anche animata e come procedere nel caso di un blog con più autori.

Mi sono già occupato diverse volte di come inserire una firma alla fine degli articoli su Blogger. Il primo articolo che ho dedicato a questo tema risale a ben 5 anni fa e lo stile era decisamente più raffazzonato di quello di adesso, almeno lo spero. Successivamente ho pubblicato un post in cui si illustrava come inserire una firma animata e come visualizzare più firme nel caso di blog con più autori.

Riprendo questo tema credendo di fare cosa gradita soprattutto ai nuovi lettori di questo sito che non mi seguono da così tanto tempo. La prima cosa da fare è quella di procurarsi una nostra firma autografa. Possiamo apporre la nostra firma su un foglio e poi scannerizzarla, ritagliarla e salvare l'immagine in formato PNG. Successivamente il file PNG dovrà essere caricato su Picasa e se ne dovrà copiare il link diretto da utilizzare nel modello di Blogger.

L'alternativa a una nostra firma autografa si chiama MyLiveSignature, un servizio gratuito che consente di creare delle firme personalizzate secondo decine di stili diversi.

CREARE UNA FIRMA CON MYLIVESIGNATURE

Si va su Create Signature e si utilizzerà il wizard per il confezionamento della firma. Nel primo passo bisogna inserire nome e cognome o comunque l'username con cui volete firmare i post. Si va quindi su Next Step in cui potrete scegliere la famiglia di font tra le 120 disponibili suddivise in gruppi di 10

Si può cercare uno stile vicino a quello con cui siamo soliti firmare o anche uno completamente diverso. Si va nuovamente su Next Step dopo aver selezionato il font preferito. Il prossimo passaggio consiste nello scegliere la dimensione della firma tra le 10 disponibili. Con un nuovo click su Next Step entreremo nella sezione in cui si può selezionare il colore della firma e quello dello sfondo.  

Si digitano i codici dei colori del testo e del background per poi vedere l'anteprima. Nel passaggio successivo potrete selezionare l'inclinazione della firma se siete soliti firmare dal basso in alto. A questo punto la firma è pronta e potrà essere scaricata cliccandoci sopra con il destro del mouse per aprire il menù contestuale e scegliendo Salva immagine con nome

Sarà scaricato un file in formato PNG a cui dovrete dare un nome. Tale immagine dovrà essere caricata su Picasa e se ne dovrà acquisire il link diretto. Se volete una firma animata potete utilizzare al posto di MyLiveSignature il servizio Gif-mania Your Animated Signatures. In questo caso ci sono quattro passaggi che consistono nell'immettere il testo, nello scegliere il tipo di font e la sua dimensione, nel selezionare il colore della firma e nello scegliere una figurina animata tra quelle proposte o nel caricarne una dal nostro computer. Più informazioni su GIF-mania le trovate in questo post.

MODIFICARE IL MODELLO PER AGGIUNGERE LA FIRMA

Ci sono vari modi per aggiungere una firma alla fine del post di Blogger. Un metodo che funziona per quasi tutti i modelli può essere il seguente. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head> cliccando su Ctrl+F e pigiando su Invio. Subito sopra a questa riga si incolla questo nuovo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.entry-content:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwJ1Kqm7gCYXGxKJcC58n2bbj_cs1SifXQXjiDM9J2K7sdmWkhDhclLkZJugyUC4xfYCNzS__t9RpwLLDzwOcs5ehbPNl2t1ekDo8dne9An74KnVADVWeX82Yzo4NInst4GH4qd1QcYCp/s273/firma-ernesto.png);
margin-left: 100px;
}
</style>
</b:if>
</b:if>

quindi si Salva il modello. Se andate su Anteprima modello non vedrete nulla perché la firma è visibile solo alla fine dei singoli articoli. Sono stati inseriti due tag condizionali che servono appunto per mostrare la firma solo nei post e non nelle pagine statiche. Dovrà essere inserito l'URL della vostra firma caricata su Picasa e la distanza che l'immagine dovrà avere dalla sinistra del layout.

SECONDO METODO PER L'INSERIMENTO DELLA FIRMA SU BLOGGER

Nel caso abbiate degli elementi alla fine del post che interferiscano con la firma, penso per esempio al widget LinkWithin o a template particolarmente sofisticati, si può provare questo nuovo metodo che inserisce la firma direttamente alla fine del Read More. Andate sempre su Modello > Modifica HTML e cercate questo blocco di codice utilizzando Ctrl+F e Invio

<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 dopo a questo incollate quest'altro 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>     

quindi cercate la riga ]]></b:skin> e subito sopra incollate il secondo codice

.firma {
height: 48px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwJ1Kqm7gCYXGxKJcC58n2bbj_cs1SifXQXjiDM9J2K7sdmWkhDhclLkZJugyUC4xfYCNzS__t9RpwLLDzwOcs5ehbPNl2t1ekDo8dne9An74KnVADVWeX82Yzo4NInst4GH4qd1QcYCp/s273/firma-ernesto.png) center no-repeat;
}

dove l'URL in rosso e l'altezza della immagine della firma debbono essere personalizzate. Si salva il modello. Come mio solito ho postato una dimostrazione online

COME INSERIRE LE FIRME IN BLOG CON PIU' AUTORI

Questo sistema appena illustrato è utile anche per quei blog in cui scrivono più persone e che quindi dove abbiano la necessità di avere una firma diversa a seconda dell'autore del post. Si utilizzano i tag di Blogger per risolvere il problema. Dopo aver cercato nel template il codice del Read More come mostrato in precedenza utilizzando Ctrl+F e Invio, subito sotto si incolla il penultimo codice con al posto delle due righe colorate di viola il blocco seguente

<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 al posto di Autore1 e Autore2 metteremo il nome o l'username dell'autore ricordandoci che sono case sensitive e che quindi le maiuscole sono diverse dalle minuscole. Nel mio caso la riga sarebbe

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

Successivamente si cerca l'altra riga ]]></b:skin> e subito sopra si incolla

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

Si salva il modello. Ovviamente vanno inseriti gli URL delle firme e le rispettive altezze. In caso di 3 autori si crea una nuova regola .firma3 con la stessi sintassi e così via.