Pubblicato il 02/10/12e aggiornato il

Mostrare emoticon animate nei commenti di un post di Blogger.

Come visualizzare emoticon animate nei commenti di Blogger. Hack funzionante anche con Internet Explorer.
Il fascino delle emoticon deriva dalla impossibilità di manifestare in modo chiaro in un testo uno stato d'animo. Fu per questo che agli albori del web furono inventate le emoticon. All'inizio si trattava di di una semplice unione di caratteri che riproduceva in modo stilizzato le espressioni facciali. Successivamente sono state introdotte delle vere e proprie immagini che vengono largamente utilizzate in servizi quali Messenger, social quali Facebook e applicazioni quali WhatsApp.

In un articolo di Blogger è facilissimo inserire selle emoticon se si utilizza l'Editor Windows Live Writer che ci mette a disposizione tutte le emoticon della Microsoft. Questa possibilità è ovviamente una prerogativa esclusiva dell'autore degli articoli. Può però essere utile ed è senza dubbio carino poter inserire delle emoticon anche nei commenti.

Mi sono più volte occupato di questo tema. Ricordo tra gli altri gli articoli
Vediamo adesso una nuova proposta per visualizzare nei commenti le emoticon animate di Facemoods che è un tool per arricchire la disponibilità di emoticon della chat di Facebook. Il sistema che si utilizza è sempre lo stesso e concerne nella creazione di un javascript che sostituisce automaticamente certe combinazioni di caratteri con una determinata emoticon debitamente caricata su un hosting. Ne ho selezionate 14 ma i più bravi di voi potranno aggiungere nuove immagini e nuove righe allo script per eventualmente ampliare la scelta. Alla fine di ciascun articolo si visualizzerà questo rettangolo

Combinazioni di tasti per inserire le emoticon animate nei commenti
:)) :d :p :(( :) :( :-? [-( :-o :-t :-ss b-( @-) =))

che serve per mostrare ai navigatori le combinazioni di testo associate a ciascuna emoticon. Ho postato in rete una dimostrazione di come funziona questa personalizzazione


Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </body> e, subito sopra, si incolla questo codice

<!-- Emoticon Animate Inizio by http://www.ideepercomputeredinternet.com -->
<script type='text/javascript'>
//<![CDATA[
function sostituisci_testo(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
caratteri = bodyText.innerHTML;
caratteri = caratteri.replace(/:\)\)/gi, "<img src='https://lh4.googleusercontent.com/-auymkpn3cMc/UGqua_gO-ZI/AAAAAAAAa-Q/OGUpiQnw-ds/s36/1.gif'/>");
caratteri = caratteri.replace(/:d/gi, "<img src='https://lh4.googleusercontent.com/-pVjpDCntI5A/UGquc-eSDYI/AAAAAAAAa-Y/BtzVEUUu8Ms/s36/2.gif'/>");
caratteri = caratteri.replace(/:p/gi, "<img src='https://lh6.googleusercontent.com/-SdaRRyV4r1I/UGqufUmaMRI/AAAAAAAAa-g/3uw1WSrx31M/s36/3.gif'/>");
caratteri = caratteri.replace(/:\(\(/gi, "<img src='https://lh5.googleusercontent.com/-tGu6vNpkeN0/UGquhvJ0-eI/AAAAAAAAa-o/fsw7IEEcNwM/s47/4.gif'/>");
caratteri = caratteri.replace(/:\)/gi, "<img src='https://lh4.googleusercontent.com/-LhriUOYe60Q/UGqukPhVdVI/AAAAAAAAa-w/C1xx5JzuJds/s36/5.gif'/>");
caratteri = caratteri.replace(/:\(/gi, "<img src='https://lh5.googleusercontent.com/-rT7rBKMIRuA/UGqumS1p-BI/AAAAAAAAa-4/bXoZlGZoOos/s36/6.gif'/>");
caratteri = caratteri.replace(/:-\?/gi, "<img src='https://lh3.googleusercontent.com/-FL-byayQ7VI/UGquomDaLII/AAAAAAAAa_A/8tfVCJW5ZH4/s36/8.gif'/>");
caratteri = caratteri.replace(/\[\-\(/gi, "<img src='https://lh4.googleusercontent.com/-jv7OFna2f7I/UGqv9EnZSNI/AAAAAAAAa_M/CkY2CwxJzK8/s36/8.gif'/>");
caratteri = caratteri.replace(/:-o/gi, "<img src='https://lh5.googleusercontent.com/-QA_ul966k7M/UGqv_nPo3hI/AAAAAAAAa_U/ZBADJ2Tw8I4/s36/9.gif'/>");
caratteri = caratteri.replace(/:-t/gi, "<img src='https://lh4.googleusercontent.com/-2-fyMuXDtWs/UGqwBoH7B4I/AAAAAAAAa_c/HBrVvHtSa8I/s36/10.gif'/>");
caratteri = caratteri.replace(/:-ss/gi, "<img src='https://lh5.googleusercontent.com/-26Re3lhTAqA/UGqwDqeQxtI/AAAAAAAAa_k/NNMxHwDJrlw/s36/11.gif'/>");
caratteri = caratteri.replace(/b-\(/gi, "<img src='https://lh5.googleusercontent.com/-mD3V-P6t1r4/UGqwF4gvMsI/AAAAAAAAa_s/Kvgdg3ngIy0/s35/12.gif'/>");
caratteri = caratteri.replace(/@-\)/gi, "<img src='https://lh3.googleusercontent.com/-Q-HIplx20UE/UGqwILAAsqI/AAAAAAAAa_0/rD_64cCx6Kw/s36/13.gif'/>");
caratteri = caratteri.replace(/=\)\)/gi, "<img src='https://lh3.googleusercontent.com/-3UpwcBVngQs/UGqwKG6QatI/AAAAAAAAa_8/RFTFH1xnSi4/s36/14.gif'/>");
bodyText.innerHTML = caratteri;
}sostituisci_testo();
//]]>
</script>
<!-- Emoticon Animate Fine -->

Pigiando su F3 o su Ctrl+F si cerca quindi la riga

<div class='post-footer-line post-footer-line-3'/>

e, subito sopra, si incolla quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><div align='center'><div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400px; text-align: left; border: 1px solid #191919; padding: 5px; background: #ffffff;'><p align='center'><b>Combinazioni di tasti per inserire le emoticon animate nei commenti</b></p>
<b>
<img border='0' src='https://lh4.googleusercontent.com/-auymkpn3cMc/UGqua_gO-ZI/AAAAAAAAa-Q/OGUpiQnw-ds/s36/1.gif'/> :))
<img border='0' src='https://lh4.googleusercontent.com/-pVjpDCntI5A/UGquc-eSDYI/AAAAAAAAa-Y/BtzVEUUu8Ms/s36/2.gif'/> :d
<img border='0' src='https://lh6.googleusercontent.com/-SdaRRyV4r1I/UGqufUmaMRI/AAAAAAAAa-g/3uw1WSrx31M/s36/3.gif'/> :p
<img border='0' src='https://lh5.googleusercontent.com/-tGu6vNpkeN0/UGquhvJ0-eI/AAAAAAAAa-o/fsw7IEEcNwM/s47/4.gif'/> :((
<img border='0' src='https://lh4.googleusercontent.com/-LhriUOYe60Q/UGqukPhVdVI/AAAAAAAAa-w/C1xx5JzuJds/s36/5.gif'/> :)
<img border='0' src='https://lh5.googleusercontent.com/-rT7rBKMIRuA/UGqumS1p-BI/AAAAAAAAa-4/bXoZlGZoOos/s36/6.gif'/> :(
<img border='0' src='https://lh3.googleusercontent.com/-FL-byayQ7VI/UGquomDaLII/AAAAAAAAa_A/8tfVCJW5ZH4/s36/8.gif'/> :-?
<img border='0' src='https://lh4.googleusercontent.com/-jv7OFna2f7I/UGqv9EnZSNI/AAAAAAAAa_M/CkY2CwxJzK8/s36/8.gif'/> [-(
<img border='0' src='https://lh5.googleusercontent.com/-QA_ul966k7M/UGqv_nPo3hI/AAAAAAAAa_U/ZBADJ2Tw8I4/s36/9.gif'/> :-o
<img border='0' src='https://lh4.googleusercontent.com/-2-fyMuXDtWs/UGqwBoH7B4I/AAAAAAAAa_c/HBrVvHtSa8I/s36/10.gif'/> :-t
<img border='0' src='https://lh5.googleusercontent.com/-26Re3lhTAqA/UGqwDqeQxtI/AAAAAAAAa_k/NNMxHwDJrlw/s36/11.gif'/> :-ss
<img border='0' src='https://lh5.googleusercontent.com/-mD3V-P6t1r4/UGqwF4gvMsI/AAAAAAAAa_s/Kvgdg3ngIy0/s35/12.gif'/> b-(
<img border='0' src='https://lh3.googleusercontent.com/-Q-HIplx20UE/UGqwILAAsqI/AAAAAAAAa_0/rD_64cCx6Kw/s36/13.gif'/> @-)
<img border='0' src='https://lh3.googleusercontent.com/-3UpwcBVngQs/UGqwKG6QatI/AAAAAAAAa_8/RFTFH1xnSi4/s36/14.gif'/> =))
</b>
</div></div>
</b:if>

dove la prima e l'ultima riga sono dei tag condizionali per mostrare il rettangolo con le istruzioni per i commentatori solo nei post. Se volete che non si veda oltre che in Home anche nelle nelle pagine statiche, inserite all'inizio e alla fine le altre due righe condizionali

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>    da mettere all'inizio del codice
</b:if>
                                                                                   da mettere alla fine

Il tag <br/> è un salto di riga per staccare un po' il rettangolo dal resto del contenuto. L'espressione Combinazioni di tasti per inserire le emoticon animate nei commenti può essere personalizzata a piacere. Inoltre si possono modificare i seguenti parametri
  1. width: 400px; è la larghezza del rettangolo 
  2. align='center' serve per centrare il rettangolo. Al posto di center si può mettere right o left
  3. border: 1px solid #191919; è lo stile del bordo e può essere modificato lo spessore, mettere una linea tratteggiata (dashed) o punteggiata (dotted) e selezionare un nuovo codice del colore.
  4. background: #ffffff; è il colore di sfondo del rettangolo e può essere adattato al modello.
Si salva il template e i navigatori potranno sbizzarrirsi a commentare usando emoticon animate

emoticon-animate-blogger
Da notare che le emoticon saranno visibili anche nelle risposte se si ha un modello con i commenti nidificati. Le emoticon funzioneranno con Chrome, Firefox, Safari e anche con Internet Explorer 9.

Aggiornamento: Se volete visualizzare il rettangolo delle emoticon sotto la  scritta Posta un commento, nel caso non ce ne fossero ancora, o sotto il testo X Commenti se qualcuno avesse già postato, occorre incollare il secondo codice in un'altra posizione. Va posto subito sopra la riga 

<div class='comments-content'>

Valgono gli stessi accorgimenti per la personalizzazione. Nella Demo il rettangolo è stato posizionato in questo modo. Naturalmente si può trovare anche un altro posto. Nel caso si sia selezionato Pagina intera o Pagina popup al posto di Incorporato sotto il post, la personalizzazione dovrebbe funzionare comunque anche se non sarà visibile nella scheda aggiuntiva ma solo nel post.




14 commenti :

  1. ciao grz di aver seguito la mia dritta del post xD.. scusa una domanda io volevo mettere le istruzioni per i commentatori con le emoticon, come le mette duypham, sotto posta un commento.. come potrei fare???

    RispondiElimina
    Risposte
    1. @OcramRosco
      Ho appena fatto un aggiornamento al post in tal senso che forse viene anche meglio.

      Elimina
  2. grz della risposta :) la ho letta appena avevo risolto la questione nel mio blog xD..... cmq io ho risolto così, se vuoi dare un occhiata: http://ps3gameita.blogspot.it/2012/10/puad-gui-pup-unpacker-decrypter-per.html

    RispondiElimina
    Risposte
    1. @OcramRosco
      Soluzione esteticamente valida ;)

      Elimina
  3. @ernesto Tirinnanzi
    Ti scrivo per chiederti come ripristinare il vecchio blogger perchè con questo nuovo faccio fatica a trovare le funzioni del blog come per esempio inserire il navabar oppure un'immagine nell'instestazione ...eccetera. Non solo io, ma alcuni miei amici sono disorientati per la complessità del nuovoblogger...
    grazie
    Kamasa

    RispondiElimina
    Risposte
    1. @kamasa54
      Non è possibile, bisogna imparare a usare questa nuova interfaccia. Presto ci farò un videotutorial.

      Elimina
  4. Sono bellissime grazie ernesto......sarebbe bello averle anche x i post,troppo carine!!!!

    RispondiElimina
  5. Grazie!!! :D E' da tempo che le cercavo!

    RispondiElimina
  6. Ciao! Ho appena creato un blog il 2°, ho giusto finito con il modello sfondo layout e company....volevo provare ad istallare queste emoticon (già fatto con il primo) ma non trova la voce body e nemmeno div class='post-footer-line post-footer-line-3'/
    cosa fare??? Il modello che utilizzo è uno di quelli preimpostati Fantastico S.p.A sfondo astratto...puoi dirmi come devo comportarmi? dovrrò rinunciare a queste stupende faccine animate????

    RispondiElimina
    Risposte
    1. Per cercare le righe di codice giuste con il nuovo Editor del modello di Blogger bisogna avere delle accortezze. Leggi qui e guarda anche il video
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  7. Grazie mille! Ho letto le tue istruzioni ed ho trovato le parti che indichi! Per il primo (body>) tutto ok per il secondo trovo div class='post-footer-line post-footer-line-3'><span class='post-location' Copio il secondo codice che indichi subito sopra ma quando faccio l'anteprima nulla appare....Il fatto che ancora il mio blog sia privato, visto che lo sto ancora impostando, influisce??? Grazie per la disponibilità e pazienza!!!

    RispondiElimina
    Risposte
    1. Nell'anteprima ovviamente non puoi vedere nulla perché le emoticon si vedono solo nei commenti dei post
      @#

      Elimina
    2. Beh intendevo dire che il rettangolo con le emoticon e le relative impostazioni di punteggiatura non si vedono...In teoria "quelle" dovrebbero essere visibili nell'anteprima....
      Grazie comunque e scusa il disturbo.

      Elimina
  8. No. Anche quello si deve vedere solo nei post
    @#

    RispondiElimina

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.