Pubblicato il 16/05/11e aggiornato il

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.

gif mania signature firma 

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

punto scorrimento firma animata 

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

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.





31 commenti :

  1. Sempre riconoscente, caro Ernesto, per l'ottimo servizio che ci offri. GRAZIE!!!

    Una domanda un pò off topic: è possibile ingrandire, cambiare colore, rendere insomma più visibile il "Posta un Commento"? Magari sarebbe interessante anche metterlo nella parte iniziale del post, per chi ha già letto l'articolo e vuole solo andare velocemente nell'area commenti.
    Grazie ancora

    RispondiElimina
  2. @francscomisc
    ci penserò senza impegno :)

    RispondiElimina
  3. quando io faccio donload this signature..poi mi apre una cosa dove mi dice di salrvarla o aprirla con internet explorer..quando provo a mettera sul desktop nno me l ofà fare. come faccio??

    RispondiElimina
  4. @BrilliDiLuce
    clicca con il destro del mouse sulla immagine e scaricala in quel modo.
    P.S. Non usare IE...

    RispondiElimina
  5. c ho provato ma niente..cosa mi consigli??

    RispondiElimina
  6. Con Chrome l'ho scaricata senza problemi... fai un po' te

    RispondiElimina
  7. @BrillidiLuce
    Usa Firefox, Chrome o Opera come browser

    RispondiElimina
  8. ho un problema: ho inserito la firma però è troppo vicina al testo del post, c'è un modo per inserirla + bassa?senza dover ogni volta lasciare 2 spazi alla fine dei post?!

    RispondiElimina
  9. @Gale plusG
    Prova a inserire un tag <br/> in questo modo

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

    Se non è sufficiente metticene due

    RispondiElimina
  10. grazie infinite, ci stavo uscendo pazzo XD

    RispondiElimina
  11. Ciao!
    Prima di tutto complimenti per il lavoro..in secondo luogo avrei un problema..intorno all'imagine mi esce un riquadro grigio..non è possibile toglierlo? è davvero brutto..
    Guarda tu stesso alla fine del post: http://loverofbeauty.blogspot.com/2011/10/review-toyoucosmetics.html

    Grazie mille in anticipo!

    RispondiElimina
  12. @BabyLux
    Il riquadro grigio se ci fai caso è presente in tutte le immagini del tuo blog. E' un CSS del modello che aggiunge questo riquadro automaticamente a tutte le immagini.
    Il CSS è questo

    .post img, table.tr-caption-container {
    border:4px solid #EEEEEE;
    padding:0;
    }
    .tr-caption-container img {
    border:medium none;
    padding:0;
    }
    Puoi andare su Modello > Modifica HTML o su Design > Modifica HTML per vederlo. Il grigio dipende dal colore #EEEEEE;
    Per non cambiare molto potresti provare a sostituire quel colore con quello trasparente cioè con questo
    #FFFFFF;
    Dovrebbe funzionare, altrimenti puoi provare a togliere tutta la riga che inizia con border ...
    Stai attenta e salva prima il modello.

    RispondiElimina
  13. Ok ho risolto...sei stato gentilissimo!!

    Ascolta, non vorrei darti fastidio (scusaaa!) ma nella homepage del blog http://loverofbeauty.blogspot.com/ ho messo lo slideshow con i codici fatti da te..solo che su 5 immagini..solo su 3 mi rimanda alla pagina..
    Ho controllato ma non ne trovo la causa..gli altri 2 è come se fossero semplici immagini.
    Cosa ne pensi?

    RispondiElimina
  14. @BaByLux

    Ci sono due errori nel codice. Non hai inserito il tag href. Al posto di

    galleryimage[1]='<a http://loverofbeauty.blogspot.com/2011/10/review-deborah2.html" target="blank"><img border="0" src="http://2.bp.blogspot.com/-V7RNrmCNB6o/ToiQC35PtUI/AAAAAAAAAV0/J1JHbqBN-vA/s200/IMAG0294%25282%2529.jpg" title="Review Deborah Milano" alt="Titolo Miniatura"></a>'

    galleryimage[2]='<a http://loverofbeauty.blogspot.com/2011/09/review-verdesativa3.html" target="blank"><img border="0" src="http://2.bp.blogspot.com/--ScFid_3cqU/ToCv2lheYpI/AAAAAAAAAVo/sXyf1-6oOIg/s200/IMAG0274.jpg" title="Review Verdesativa" alt="Titolo Miniatura"></a>'

    devi mettere


    galleryimage[1]='<a href="http://loverofbeauty.blogspot.com/2011/10/review-deborah2.html" target="blank"><img border="0" src="http://2.bp.blogspot.com/-V7RNrmCNB6o/ToiQC35PtUI/AAAAAAAAAV0/J1JHbqBN-vA/s200/IMAG0294%25282%2529.jpg" title="Review Deborah Milano" alt="Titolo Miniatura"></a>'

    galleryimage[2]='<a href="http://loverofbeauty.blogspot.com/2011/09/review-verdesativa3.html" target="blank"><img border="0" src="http://2.bp.blogspot.com/--ScFid_3cqU/ToCv2lheYpI/AAAAAAAAAVo/sXyf1-6oOIg/s200/IMAG0274.jpg" title="Review Verdesativa" alt="Titolo Miniatura"></a>'

    RispondiElimina
  15. O_O ok mi devo regalare degli occhiali da vista!

    Perdonami per averti disturbato così tanto, è da oggi che studio economia politica e secondo me qualcosa si è fuso li sopra eheh :)

    Ti ringrazio tantissimo del tuo aiuto, sei stato gentilissimo ed esaustivo!
    Per ringraziarti mi iscrivo al tuo blog ^ ^

    Un bacione,

    Barbara

    RispondiElimina
  16. @BaByLux
    Non mi ero accorto che ci sono anche altri errori. Non si deve mettere
    target="blank"
    ma
    target="_blank"

    RispondiElimina
  17. Ciao... So che è un post un pò vecchio però non trovo il codice che indichi per inserire l'immagine.... Grazie Ailinen

    RispondiElimina
  18. Grazie Ernesto questa mi piace moltissimo e l'ho appena messa!!

    RispondiElimina
  19. Neanche io trovo la stringa da cercare prima di inserire il tuo codice... :(

    RispondiElimina
    Risposte
    1. @NonnaPapera
      Se non la trovi significa che non hai messo la spunta a "Espandi i modelli widget". E' un quadratino che sta in alto sopra all'area del modello.

      Elimina
  20. nel mio codice non c'è data:post.body cm faccio??

    RispondiElimina
    Risposte
    1. @# Impossibile che non ci sia quella riga, è quella che serve per inserire il contenuto del post. Immagino che tu abbia dei problemi a cercare il codice. Leggi questo articolo
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guarda anche il video

      Elimina
  21. Salve Ernesto... ho inserito la mia forma seguendo le Sue indicazioni, ma me la visualizza in un riquadro bianco. Ho provato a seguire le indicazioni che aveva dato a BabyLux ma non ho il CSS indicato e quindi non posso sostituire il valore #EEEEEE;
    Come posso fare per togliere il riquadro e vedere solo la firma? Grazie

    RispondiElimina
    Risposte
    1. Il problema è il modello del blog che inserisce automaticamente bordi e sfondi nelle immagini. Puoi provare a togliere questi bordi a tutte le immagini seguendo questo post
      http://www.ideepercomputeredinternet.com/2012/07/eliminare-bordi-immagini-blogger.html

      Per togliere questi elementi solo a questa immagine prova a sostituire nel codice

      img src='URL_Immagine'

      con

      img style='padding: none !important; border:none !important; background: none !important;' src='URL_Immagine'

      lasciando invariato tutto il resto.
      @#

      Elimina
    2. Allora...ho fatto tutto e adesso lo sfondo è trasparente, però non riesco a togliere il bordo e quindi il rettangolo si vede ancora, trasparente ma si vede... :(

      Elimina
  22. Risposte
    1. Forse non hai copiato o incollato bene il codice. Se sei sicura di questo prova a sostituire le virgolette doppie con l'apostrofo vale a dire questo segno ' al posto di questo "
      @#

      Elimina
  23. Ciao, avrei bisogno di un aiuto! Ho appena aggiunto un nuovo autore al mio blog, così ora siamo in due, e abbiamo creato ex novo le nostre firme sul sito che consigli. Questo codice deve essere inserito oltre a quello che fornisci nel post dove spieghi come mettere firme diverse in base all'autore, o quello è sufficiente? Mille grazie :D

    RispondiElimina
    Risposte
    1. Nei blog con più autori ti consiglio di seguire questo post
      http://www.ideepercomputeredinternet.com/2013/06/firma-blogger-post.html
      specialmente nella sezione
      COME INSERIRE LE FIRME IN BLOG CON PIU' AUTORI
      @#

      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.