Come mostrare emoticon animate nei commenti di Blogger.

Come personalizzare il modello di Blogger per aggiungere nei commenti delle emoticon animate.

Nel precedente articolo abbiamo visto come aggiungere emoticon ai post di Blogger o di Wordpress. In questo articolo mostrerò invece come si possano pubblicare delle emoticon animate nei commenti di Blogger non solo da parte dell'autore del sito ma anche da parte degli altri commentatori.

Le emoticon erano nate all'inizio per manifestare uno stato d'animo quando non fosse possibile farlo in modo chiaro con il testo. Si trattava quindi di combinazioni di caratteri che davano l'aspetto stilizzato di una espressione facciale. Ben presto però siamo passati all'utilizzo di immagini di piccole dimensioni anche animate. Con un opportuno javascript vedremo appunto come sostituire una data combinazione di caratteri con una determinata emoji animata quando questa combinazione viene pubblicata in un commento o in una risposta a un commento. Le emoji animate le ho caricate su un mio album di Picasa e ne ho ricavato il loro link diretto che ho usato per creare il codice javascript.

Per rendere possibile ai lettori di usare le emoji è necessario mostrare quali siano le combinazioni di caratteri collegate alle varie emoticon mostrandole prima del modulo dei commenti

Tale rettangolo in realtà si visualizzerà in questo modo

Combinazioni di tasti per inserire le emoticon animate nei commenti

:)) :d :p :(( :) :( :-? [-( :-o :-t :-ss b-( @-) =))

L'installazione di questa personalizzazione non è molto complessa. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </body> quindi, subito sopra, si incolla

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

Il codice precedente sarebbe sufficiente per la sostituzione dei caratteri con l'immagine corrispondente però i lettori non potrebbero conoscere queste combinazioni. Va quindi mostrato un rettangolo come quello qui sopra sia nei post che abbiano già ricevuto dei commenti sia nei post che non ne abbiano ancora ricevuti. Il codice da incollare è il seguente

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<br/> <div align='center'><div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 520px; 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>
</b:if>

Con Ctrl+F si cerca ora la riga

<div class='comments-content'>

e il codice precedente si incollerà subito sopra a tale riga. Il rettangolo con le combinazioni delle emoticon sarà visto nei post che abbiano già ricevuto dei commenti subito sotto al loro numero

Per mostrarlo anche alla fine dei post ancora senza commenti dovremo cercare questa nuova riga

<h4 id='comment-post-message'>

Nel template ce ne sono due. La prima serve per mostrare il messaggio dei commenti nella versione mobile e la seconda per mostrare il messaggio dei commenti nella versione desktop. Quella per la versione desktop si riconosce perché subito sopra ha il tag <b:else/>. Il codice va incollato subito sopra a tale riga e dopo <b:else/>. Il rettangolo si vedrà quindi anche nei post senza commenti

Finalmente si salva il modello.

PERSONALIZZAZIONI PRINCIPALI

Il tag <br/> è un salto di riga per staccare il rettangolo dal resto del contenuto.
L'espressione Combinazioni di tasti per inserire le emoticon animate nei commenti può essere personalizzata a piacere ricordandoci di non inserire apostrofi.
width: 520px; è la larghezza del rettangolo
align='center' serve per centrare il rettangolo. Si può usare anche left o right
border: 1px solid #191919; è lo stile del bordo e può essere modificato il suo spessore, usare una linea tratteggiata (dashed) o punteggiata (dotted) e un nuovo codice del colore.
background: #ffffff; è il colore di sfondo del rettangolo
Le due righe evidenziate di giallo sono dei tag condizionali e servono per mostrare il rettangolo solo nei post e le due righe evidenziate di verde per non mostralo nelle pagine statiche.

Demo Clicca qui

Questa personalizzazione l'ho testata solo per il modulo mostrato incorporato sotto il post e non posso dire nulla per le altre due opzioni accessibili in Impostazioni -> Post e Commenti.

Pubblicato il 08/07/16 - aggiornato il | 1 commento :

Come mostrare emoticon animate nei commenti di Blogger.

PERSONALIZZAZIONI PRINCIPALI

1 commento :

Ricevi nuovi post via email: