Pubblicato il 06/06/13e aggiornato il

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

mylivesignature

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.  

colori-firma-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

firam-mylivesignature

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://lh6.googleusercontent.com/-cTJeAEUd6ck/UbCQbszLrTI/AAAAAAAAh_s/B-5HqeJbtPc/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://lh6.googleusercontent.com/-cTJeAEUd6ck/UbCQbszLrTI/AAAAAAAAh_s/B-5HqeJbtPc/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.




10 commenti :

  1. Pensa che mesi fa... forse di più tempo fa, feci la stessa cosa usando lo stesso servizio solo che inclusi la firma nel modello del post.

    Che gran palle che mi ero fatto quando ho deciso di cancellare la firma da ogni post e lo dovevo fare in manuale.

    Non sapevo di questa tecnica.
    Grazie,
    Jan

    RispondiElimina
  2. Ciao Ernesto!

    Io non posso usare picasa perché ho Ubuntu di Linux, ci ho giá provato, mi dice di no (???).

    Posso usare Picmonkey per il disegno e poi photobucket per avere il codice HTLM?

    Grazie!

    RispondiElimina
  3. uff...io ho il linkwithin inseritoalla classica maniera tipo widget.

    con il primo sistema per inserire la firma non si vede a modello salvato (no anteprima) e con il secondo non trovo la stringa jump link.

    ho trovato quella del linkwithin.

    cosa faccio?

    grazie!

    RispondiElimina
    Risposte
    1. La firma si vede solo nei post e non in homepage quindi non si vede nella Anteprima ma solo se si salva il template e si apre un post, visto la presenza di tag condizionali. Se non riesci a caricare l'immagine su Picasa (mi sembra impossibile visto che tutte le immagini del tuo blog vanno lì) puoi usare un altro hosting che dia però il link diretto. Prova con Google+ (non conosco PickMonkey)
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      Se invece hai problemi a trovare una stringa leggiti il post su come trovare il codice nel modello di Blogger
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      Magari guarda anche il video
      @#

      Elimina
    2. Grazie Ernesto,
      si ho giá seguito altri tuoi tutorial, mandata da Alex!

      Allora, le mie immagini sono su photobucket o imageshack che mi danno i link diretti o HTLM.

      Ho usato il primo sistema e tutto ok, almeno per provare, solo che la firma mi appare sotto al linkwithin.

      Allora ho fatto il secondo sistema ma la firma allora non mi appare proprio.

      Quindi direi che mi manca solo un pochino pochino per riuscire a sistemare.

      Dove sbaglio?

      Elimina
    3. Sarà anche utile dirti che come vedi io non taglio i post con il "continua a leggere" (dovrei farlo?) e mi chiedo cosa devo fare con il codice in viola visto che sono l'unica autrice. grazie.

      Elimina
    4. Non è detto che sbagli. Linkwithin è molto invasivo. Prova a incollare il codice sopra a quel blocco vale a dire sotto data:post.body/
      @#

      Elimina
    5. L'ultima parte del post riguarda i blog con più autori quindi non la considerare. Mettere o meno l'intervallo è ininfluente. Prova a incollare il codice subito sotto questa riga
      <data:post.body/>
      Se non la trovi prova a cercarla con questo sistema
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
  4. Io non sono riuscita con i primi due metodi, il secondo l'ho provato anche se non avevo LinkWhitin attivato.. non so come fare :(

    Aiuto!

    RispondiElimina
    Risposte
    1. Forse non hai trovato la parte del codice giusta in cui incollare quello del post. Leggi questi due articoli e guarda i relativi video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Soprattutto il secondo
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.