Pubblicato il 08/07/16e aggiornato il

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

  emoticon-blogger

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

<!-- Emoticon Animate Inizio  -->
<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 -->

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

<!-- Emoticon Animate Rettangolo Combinazioni Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>   
<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://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>
</b:if>
<!-- Emoticon Animate Rettangolo Combinazioni Fine -->

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

commenti-emoticon-animate

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

rettangolo-emoticon-blogger

Finalmente si salva il modello.
 

PERSONALIZZAZIONI PRINCIPALI

  1. Il tag <br/> è un salto di riga per staccare il rettangolo dal resto del contenuto.
  2. L'espressione Combinazioni di tasti per inserire le emoticon animate nei commenti può essere personalizzata a piacere ricordandoci di non inserire apostrofi.
  3. width: 520px; è la larghezza del rettangolo
  4. align='center' serve per centrare il rettangolo. Si può usare anche left o right
  5. 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.
  6. background: #ffffff; è il colore di sfondo del rettangolo
  7. 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.
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.




Nessun commento :

Posta un commento

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.