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

1. Emoticon animate su Blogger -
2. Emoticon per blog con commenti nidificati -

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZel0tUcZuedqqSprxHtymUbFvPR-OlcxEacbpfyZPaTZOLZOAi_6stFz2JrBYN6iDtgo0DO9vE-g7JOKjzOXObowEgSK-w4Q8JnpYEkXppExMoSqdLR8-wIqAj2cD-4C1nW9jTM8Zxwx1/s36/1.gif'/>");
caratteri = caratteri.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPY_74rj2X0v1QsyJzIwdKodu9R9i17oKm8AXCc-dmQ0IoXnuVSoSprJD5XteOB6rnIXDmmPULx9MdSxhNXqd2Pu_VIDOir0p-nU-yL50wiRHRJ7fgGHlb_HaEXc-aMjftebxdQrtvbE1b/s36/2.gif'/>");
caratteri = caratteri.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpJ7dOqzlw8Kc5RK6uJo5-c5y17HC7wAmmWT0-5D3a9bdNAeANqD_QUmLwD2wRyxTiNnrzM_i6ptDk9YO15NNyWj_TJuwTPxoW1jZsfyevabiqdRmydYIYRrxXh2q2m5Pkfd3z3FRaN04/s36/3.gif'/>");
caratteri = caratteri.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJK8C8mTbcoRuqRjA1t_8RtA-5DYea47i3brnzb3fgzFF0jw8KY5af9jriTr_6UrFQbDm3fF-Os2B2lzTsIrP9BerQKgnVipwkLciTld_K8OuR7lztbKTT6YaPrSvhJr_VXG63GbsXJUj/s47/4.gif'/>");
caratteri = caratteri.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKD8XxKBtsyRZ9NZ2y74aUrT3CJftGGT53b6RcTXqvsWx5un2NJEIHjNDB6Venn4cRM7XXH1Hs_dkXKSW0gH7zK8LSCHnsO96v4VQ8TZ0N5c-8Kx9nKl7zYapQtq96AkcadjaNT4XPq23/s36/5.gif'/>");
caratteri = caratteri.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBajFB2MB0fQNNZeJw4RHzrFkHqDdtXJHh2qt6IOLN87rB1ZMF400oaaQvKjzUOW4jh8cXO6B07LnDU6DFO44sFZa7OKJFo0Lb83jGqb29Sbl2RG7hEWly_wZkqytOlEokeagfG7z6ekP_/s36/6.gif'/>");
caratteri = caratteri.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrktz-fBNfAqknd5OYbVPpUIIqonqx_K63OQdf0ItUBqVz5oGgUViw4sc5FoU7QSTSY93HtWL-n_DFvBu3uUzV1mqzargGIgF7lNUZGFoaSHkZriHjhOXZApNjYaG-GXov1InMZcusdYYk/s36/8.gif'/>");
caratteri = caratteri.replace(/\[\-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-LDNlKIOcAGgvKbakGOYq0c42hlzA5itaSzUVy9zLFZR3ni8UkWkhKqCYcRssvnt1RXEVEDwiJd_4RO76rDcSseEx33YFBTsGimlbzCWzgMjlKc1NA1IhtXRQoyFf4RoQ2xr10nesO-K/s36/8.gif'/>");
caratteri = caratteri.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEYFLaJJCY2F6MfoEqwcAuIZVOa9A7ECaXcVyJlm-C7WV3VI8bWGKWvSgmQa0H1_EMT6cAj_44CQMGhTWiUyFvYk1535RhP44oOqAXDt5l-mxfW5-VBuIUKW-C6aDAJCp9_TTiqNeLMgZ/s36/9.gif'/>");
caratteri = caratteri.replace(/:-t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqjYbHha4JzWoAxSQf-uvi1i95S_zYupHvEP33A5oYSpAN2Tb8lnJXyv4ebmEdTABbLvTSwLL9UNmtOCiub7MUPB8Jc5ez0jCIqVJ7k6lYM7f_AmPDIVLz7qVaFDgTRlofwi1g9MxUjzM/s36/10.gif'/>");
caratteri = caratteri.replace(/:-ss/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOzgkfoYRp7s-Y-5JUcY92bmPwafAgx0pzG5FnPd9xpDYzMezMYjzBMkV1rwWMYm49QUGYR_z6qPJ3oVoULVuy2-lZzRDXVJ7hlhIZBbviuJUTUc9yJDkdR2uPy6sdt8fazRvhWD6k5xAc/s36/11.gif'/>");
caratteri = caratteri.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLR8AVlpxoq0-N88wsp5IuloRXVBHGBrZG-JGbRRgzdswNUs2ipxnbVyLWkr_fXiQEfrvGs1OORo5PYFoPUSW6X2RzofrH2AjZ9STbvctK3jEgrJ-ZvrDjUiWarge9xk_PxCbwVYANjyB/s35/12.gif'/>");
caratteri = caratteri.replace(/@-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJfhHOgtG8B44Sq-QkIUXPGn44CU8MrqWVgaCiB0DphhiG8CgEIDzx6pWn6OggrqlIVPaXhmAe9UzaQxavx9_j5fYIvc3gE2ifJ-uuh9qMdt8Kqx7LbjrnAXREo6xXKYiB4KYVQVhyphenhyphenJ3U/s36/13.gif'/>");
caratteri = caratteri.replace(/=\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzo8ggWHRAy0_2DxdFlFZ7XL_s-CrBMKt9d2mXcuWp-YNjTTrEt_mmmgbfVhOuobtnyrsEct9NvqnNi3xHtbQQKzHLsTTKrMpL4zBu0OIzpyhE2_ABs2PDXRbFBUeK-v9n2MDRaO9Cg93/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZel0tUcZuedqqSprxHtymUbFvPR-OlcxEacbpfyZPaTZOLZOAi_6stFz2JrBYN6iDtgo0DO9vE-g7JOKjzOXObowEgSK-w4Q8JnpYEkXppExMoSqdLR8-wIqAj2cD-4C1nW9jTM8Zxwx1/s36/1.gif'/> :))
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPY_74rj2X0v1QsyJzIwdKodu9R9i17oKm8AXCc-dmQ0IoXnuVSoSprJD5XteOB6rnIXDmmPULx9MdSxhNXqd2Pu_VIDOir0p-nU-yL50wiRHRJ7fgGHlb_HaEXc-aMjftebxdQrtvbE1b/s36/2.gif'/> :d
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpJ7dOqzlw8Kc5RK6uJo5-c5y17HC7wAmmWT0-5D3a9bdNAeANqD_QUmLwD2wRyxTiNnrzM_i6ptDk9YO15NNyWj_TJuwTPxoW1jZsfyevabiqdRmydYIYRrxXh2q2m5Pkfd3z3FRaN04/s36/3.gif'/> :p
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJK8C8mTbcoRuqRjA1t_8RtA-5DYea47i3brnzb3fgzFF0jw8KY5af9jriTr_6UrFQbDm3fF-Os2B2lzTsIrP9BerQKgnVipwkLciTld_K8OuR7lztbKTT6YaPrSvhJr_VXG63GbsXJUj/s47/4.gif'/> :((
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKD8XxKBtsyRZ9NZ2y74aUrT3CJftGGT53b6RcTXqvsWx5un2NJEIHjNDB6Venn4cRM7XXH1Hs_dkXKSW0gH7zK8LSCHnsO96v4VQ8TZ0N5c-8Kx9nKl7zYapQtq96AkcadjaNT4XPq23/s36/5.gif'/> :)
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBajFB2MB0fQNNZeJw4RHzrFkHqDdtXJHh2qt6IOLN87rB1ZMF400oaaQvKjzUOW4jh8cXO6B07LnDU6DFO44sFZa7OKJFo0Lb83jGqb29Sbl2RG7hEWly_wZkqytOlEokeagfG7z6ekP_/s36/6.gif'/> :(
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrktz-fBNfAqknd5OYbVPpUIIqonqx_K63OQdf0ItUBqVz5oGgUViw4sc5FoU7QSTSY93HtWL-n_DFvBu3uUzV1mqzargGIgF7lNUZGFoaSHkZriHjhOXZApNjYaG-GXov1InMZcusdYYk/s36/8.gif'/> :-?
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-LDNlKIOcAGgvKbakGOYq0c42hlzA5itaSzUVy9zLFZR3ni8UkWkhKqCYcRssvnt1RXEVEDwiJd_4RO76rDcSseEx33YFBTsGimlbzCWzgMjlKc1NA1IhtXRQoyFf4RoQ2xr10nesO-K/s36/8.gif'/> [-(
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEYFLaJJCY2F6MfoEqwcAuIZVOa9A7ECaXcVyJlm-C7WV3VI8bWGKWvSgmQa0H1_EMT6cAj_44CQMGhTWiUyFvYk1535RhP44oOqAXDt5l-mxfW5-VBuIUKW-C6aDAJCp9_TTiqNeLMgZ/s36/9.gif'/> :-o
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqjYbHha4JzWoAxSQf-uvi1i95S_zYupHvEP33A5oYSpAN2Tb8lnJXyv4ebmEdTABbLvTSwLL9UNmtOCiub7MUPB8Jc5ez0jCIqVJ7k6lYM7f_AmPDIVLz7qVaFDgTRlofwi1g9MxUjzM/s36/10.gif'/> :-t
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOzgkfoYRp7s-Y-5JUcY92bmPwafAgx0pzG5FnPd9xpDYzMezMYjzBMkV1rwWMYm49QUGYR_z6qPJ3oVoULVuy2-lZzRDXVJ7hlhIZBbviuJUTUc9yJDkdR2uPy6sdt8fazRvhWD6k5xAc/s36/11.gif'/> :-ss
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLR8AVlpxoq0-N88wsp5IuloRXVBHGBrZG-JGbRRgzdswNUs2ipxnbVyLWkr_fXiQEfrvGs1OORo5PYFoPUSW6X2RzofrH2AjZ9STbvctK3jEgrJ-ZvrDjUiWarge9xk_PxCbwVYANjyB/s35/12.gif'/> b-(
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJfhHOgtG8B44Sq-QkIUXPGn44CU8MrqWVgaCiB0DphhiG8CgEIDzx6pWn6OggrqlIVPaXhmAe9UzaQxavx9_j5fYIvc3gE2ifJ-uuh9qMdt8Kqx7LbjrnAXREo6xXKYiB4KYVQVhyphenhyphenJ3U/s36/13.gif'/> @-)
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzo8ggWHRAy0_2DxdFlFZ7XL_s-CrBMKt9d2mXcuWp-YNjTTrEt_mmmgbfVhOuobtnyrsEct9NvqnNi3xHtbQQKzHLsTTKrMpL4zBu0OIzpyhE2_ABs2PDXRbFBUeK-v9n2MDRaO9Cg93/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

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.