Come inserire emoticon animate nei commenti di Blogger.

Come visualizzare emoticon animate nei commenti di Blogger.

Mi sono già occupato di questo tema in due post di molto tempo fa in cui illustravo come inserire le emoticon nei commenti digitando delle opportune combinazioni di tasti, nel caso si abbia il modulo subito sotto il post o invece si sia optato per la finestra popup o la pagina intera. Con questo articolo voglio riprendere questa personalizzazione per presentarla ai nuovi utenti di Blogger che forse non la conoscono. Prima di iniziare la trattazione dico subito che le emoticon animate sono visibili con Firefox, Chrome, Opera, Safari e Internet Explorer 9 mentre non lo sono con IE 8 o precedenti. Inoltre lo script funziona perfettamente in quasi tutti i template più vecchi mentre dà delle difficoltà con alcuni di quelli nuovi creati con il Designer Modelli. Le emoticon inserite sono alcune di quelle standard del Messenger di Yahoo. I più bravi possono inserirne anche altre modificando il codice e inserendo le immagini con la stessa sintassi.

Installazione delle emoticon animate nel caso del modulo dei commenti incorporato sotto il post
Per controllare la scelta che abbiamo fatto sulla configurazione dei commenti bisogna andare su Impostazioni > Commenti > Posizionamento modulo dei commenti e si guarda dove abbiamo messo il segno di spunta

Se si vuole cambiare si può sempre cliccare su un'altra opzione e andare in fondo su Salva impostazioni. Per il modulo sotto il post si procede in questo modo. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e si cerca la riga

 <b:if cond='data:post.embedCommentForm'>

Immediatamente sotto si incolla questo

• Codice delle emoticon animate - 

I dati da personalizzare riguardano la larghezza del rettangolo in cui si visualizzano. Al posto di 65% può essere messo un numero superiore se si ha un layout stretto o inferiore se invece si ha molto largo. Si può anche configurare lo stile dei bordi del rettangolo in cui visualizzare le emoticon e scegliere il background come quello del nostro blog. In ogni caso è meglio procedere alle modifiche in una fase successiva.

Adesso si cerca la riga </body> e, subito sopra, si incolla quest'altro codice

<script src='https://sites.google.com/site/scriptperilblog/effetti/smiley2.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/IBjvr' target='_blank'><span style='font-size: x-small;'>Emoticon Animate</span></a></noscript>

Si salva il modello. Se adesso digitate una combinazione di tasti come quelle mostrate, lo script la trasformerà in una emoticon

• Demo di inserimento di emoticon animate nei commenti -

Installazione delle emoticon animate per commenti su finestra popup o pagina intera
Se si è optato per i commenti da inserire in una pagina popup o intera, il problema sta tutto nel cercare la posizione ottimale in cui visualizzare il rettangolo con le emoticon e i corrispondenti segni ortografici

Nel mio test l'ho inserito subito sopra all'elenco dei commenti ma si può optare per un'altra posizione. Si va su Design > Modifica HTML e si salva il modello completo. Si espandono i modelli widget e si cerca la riga

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

La slash finale in alcuni modelli non c'è ma non dovrebbe essere un problema trovarla. Subito sopra si incolla il

• Codice delle emoticon per i commenti con la finestra popup -

Anche in questo caso le personalizzazioni possono essere fatte in un secondo tempo e riguardano

1. I tag <center> e </center> se si vuole centrare il rettangolo nel layout
2. Lo stile del bordo del rettangolo e il colore del testo (#191919)
3. La scritta da visualizzare sopra le emoticon (colorata di blu)
4. La larghezza del rettangolo espressa in percentuale (45%). Si aumenta se si hanno layout stretti
5. Il colore di sfondo del rettangolo (#FFFFFF). Per eventuali dubbi consultate il post sui codici dei colori.

Adesso si cerca la riga </body> che si trova nella parte finale del template e subito sopra si incolla questo codice

<script src='https://sites.google.com/site/scriptperilblog/effetti/smiley2.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/IBjvr' target='_blank'><span style='font-size: x-small;'>Emoticon Animate</span></a></noscript>

Si salva il modello. Quando i commentatori digiteranno le combinazioni di tasti corrispondenti, al loro posto saranno visualizzate delle emoticon animate

• Demo dell'inserimento di emoticon animate -