Come inserire emoticon nei commenti di Blogger se sono state attivate le risposte o commenti nidificati.

Come inserire le emoticon nei commenti e nelle risposte di Blogger.

Mi sono occupato a più riprese di come inserire le emoticon nei commenti di Blogger. Ho illustrato tra l'altro un metodo per visualizzare le emoticon animate e un altro per le emoticon di Facebook.

Recentemente Blogger ha introdotto i commenti nidificati con delle classi di stile completamente diverse dalle precedenti. In alcuni modelli personalizzati queste modifiche non hanno cambiato il codice e in quel caso si possono seguire i tutorial precedenti per visualizzare le emoticon nei commenti. In altri modelli sono invece comparsi i pulsanti Rispondi e Elimina e, da un giorno all'altro, hanno smesso di funzionare tutte le personalizzazioni che erano state introdotte in quella zona del template.

E' il caso per esempio dei numeri posti al lato di ciascun commento, personalizzazione che per fortuna possiamo introdurre nuovamente mediante il tutorial per la numerazione dei commenti. 

Vediamo come introdurre nuovamente anche le emoticon, sia nei commenti unici sia nelle risposte o discussioni che dir si voglia. Si tratta delle emoticon classiche, quelle che vengono introdotte nei forum o su Facebook mediante delle scorciatoie da tastiera comuni a tutti i servizi.

Qui di seguito posto la tabella delle corrispondenze

Significato	Aspetto	Scorciatoie
sorriso		:) :-) :] :-]
pianto		:'-(  :((  :'(
triste		:( :[ :-( :-[
lingua		:P :-P
riso		:D :-D xD
oops		:$ :-$
ammiccamento		;) ;-) ;] ;-]
neutro		:-I  :| :-|
segreto		:-X
sorpresa		:O :-O
arrabbiato		|O  |-O  ¬¬
confuso		:S :-/

Come vedete per alcune emoticon ci sono più combinazioni di caratteri con cui si possono inserire. Prima di iniziare ogni modifica occorre salvare il template per un eventuale ripristino. Andate quindi in Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate la riga

<data:post.commentHtml/>

e, immediatamente sotto, incollate questo codice

<script type='text/javascript'>
//<![CDATA[
var emovar = 0;
function emocomm(el) {
    var elem = typeof el === "string" ? document.getElementById(el) : el,
    testo = elem.innerHTML,
    // :) :-) :] :-]                // :'-(  :((  :'(       // :( :[ :-( :-[      // :P :-P   // :D :-D xD  // :$ :-$ // ;) ;-) ;] ;-]        // :-I  :| :-|    // :-X // :O :-O // |O  |-O  ¬¬  // :S :-/
    regs = [":\\)|:-\\)|:\\]|:-\\]",":'-\\(|:\\(\\(|:'\\(",":\\(|:\\[|:-\\(|:-\\[",":P|:-P",":D|:-D|xD",":\\$|:-\\$",";\\)|;-\\)|;\\]|;-\\]",":-I|:\\||:-\\|",":-X",":O|:-O","\\|o|\\|-o|¬¬",":S|:-\\/"],
    classe = "sorriso pianto triste lingua riso oops ammiccamento neutro segreto sorpresa arrabbiato confuso".split(" "),
    i = 0,
    reg
    for(; regs[i]; i++){
        reg = new RegExp("("+regs[i]+")(\\s|$)", "gi")
        testo = testo.replace( reg, function(){emovar++;return "<i class='icon "+ classe[i] +"' id='icon"+(emovar).toString()+"'><\/i> "})
    }
    elem.innerHTML = testo
}
function emoannidate(){
    var commenti = document.getElementById('comments-block') || document.getElementById('comment-holder' ) , i = 0;
    commenti = commenti.getElementsByTagName('p')
    for(; commenti[i]; i++){
        emocomm(commenti[i])
    }
}
emoannidate()
//]]>
</script>

Cercate adesso la riga ]]></b:skin> e, subito sopra, incollate quest'altro codice

i.icon{
    width:15px;height:15px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_RdsrI0zcTkUYCP_CIEorPKbynd4Y5DKfMBljwmn0zGYwA6b7-GEf765heIs75ZE6206PfUD9N3FhyphenhyphenXe8ZSRH_-plIDlRBGvpADBHyw3_2q6eQWzFNkRFZRCbFlAgqs0UT2OUo7kZ/s180/emoticon-commenti.png);
    background-repeat:no-repeat;
    display: inline-block;
}
i.icon.confuso{ background-position: 0 0;  }
i.icon.lingua{ background-position:-15px 0;  }
i.icon.arrabbiato{ background-position: -30px 0;  }
i.icon.pianto{ background-position: -45px 0;  }
i.icon.ammiccamento{ background-position: -60px 0;  }
i.icon.neutro{ background-position:-75px 0;  }
i.icon.oops{ background-position: -90px 0;  }
i.icon.riso{ background-position: -105px 0;  }
i.icon.segreto{ background-position: -120px 0;  }
i.icon.sorpresa{ background-position: -135px 0;  }
i.icon.sorriso{ background-position: -150px 0;  }
i.icon.triste{ background-position: -165px 0;  }

Opzionalmente si può inserire anche una immagine per mostrare ai commentatori le corrispondenze più comuni tra emoticon e combinazioni di caratteri. Si tratta di visualizzarla subito sotto al footer esclusivamente nei post e ha questo aspetto

Se scegliete di mostrarla, cercate la riga

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

e, subito sotto, incollate quest'ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuvKqxCZMo0Q0PDxLL5Dvvm06j7vLn1RA9a5aMxWbGPqeyGoN9Xnn_ej63ZTJr7K9n4DuiJNOXwe6tfhcOtahzstwqG-pveUroNdmWTFGWKAzq7_kDlDpX0njeCP2OHJI1b9pLTSx/s549/emoticon-blogger.png'/></center>
</b:if>

in cui, oltre all'immagine, sono presenti anche i due tag condizionali. Finalmente si salva il modello e si possono inserire le emoticon nei commenti di Blogger semplicemente digitando una delle combinazioni di caratteri corrispondenti. Ho anche postato una

• Demo delle emoticon nei commenti di Blogger -

in cui potete testare il funzionamento della personalizzazione.