Inserire le emoticon animate di Yahoo nei commenti di Blogger.

Come inserire le emoticon di Yahoo nei commenti di Blogger.

Blogger ha recentemente introdotto diverse nuove funzionalità nei commenti come quella delle discussioni ma ancora siamo lontani dall'avere in questa sezione tutte le impostazioni desiderate dagli utenti. Una delle lacune più sentite è quella della mancanza delle emoticon che sono utili per condividere uno stato d'animo che non può essere specificato con dei semplici caratteri di testo.

Yahoo nel suo messenger ha tutta una serie di emoticon animate molto carine. Cliccando con il destro del mouse su ciascuna di esse e scegliendo Copia URL immagine possiamo ottenerne il link diretto. Per utilizzarle non occorre quindi caricarle su un nostro hosting ma si possono direttamente usare gli URL di Yahoo. Le emoticon animate di Yahoo sono 60 e vediamo come si possano usare per inserirle nei commenti del nostro blog su Blogger. Questa personalizzazione funzionerà con Chrome, Firefox e  forse con Internet 10 che da un paio di giorni è possibile installare anche su Windows in versione Beta e in italiano. Le emoticon non si visualizzeranno con le versioni precedenti di IE.

Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga ]]></b:skin> e, subito sopra, si incolla il seguente CSS

/* Emoticon nei commenti  */
.emoticonsmiley {
    background: none repeat scroll 0 0 #FFFFFF !important;
    font-size: medium !important;
    padding: 8px !important;
    text-align: left !important;
    font-weight:bold !important;
    font-size:11px !important;
    border:1px solid #191919;
}
img.smiley {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

successivamente si cerca la riga 

<div class='comments-content'>

e, subito sopra, si incolla quest'altro codice

<!-- Inizio Rettangolo Emoticon -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div class='emoticonsmiley'>
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='smiley' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
</div>
</b:if>
<!-- Fine Rettangolo Emoticon -->

Infine si cerca la riga </body> e, subito sopra, si incolla questo ultimo codice

<!-- Inizio Emoticon nei commenti di Blogger by http://www.ideepercomputeredinternet.com -->
<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comment-holder');
if (a) {
    b = a.getElementsByTagName("p");
    for (i = 0; i < b.length; i++) {
        if (b.item(i).getAttribute('CLASS') == 'comment-content') {
            rp_sly = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/O:-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-bd/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/7:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/2\):\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\)\]/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\(\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\;\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:D/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\;\;-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/7:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/~\X\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:x/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\*/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/=\(\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\S\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\O/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\X\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/B-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\#:-\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\(:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/=\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-B/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/=\;/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-c/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-h/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-t/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/8-7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\I-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/8-\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\L-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-a/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\[-\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\O\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/8-\}/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/2:-\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/=\P~/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-\?/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/#-o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/=\D7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\@-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\^o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-w/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\X\_\X/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:\!\!/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\\m\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:-q/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/\^\#\(\^/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif' alt='' class='smiley'/>");
            rp_sly = rp_sly.replace(/:ar\!/ig, "<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif' alt='' class='smiley'/>")
            b.item(i).innerHTML = rp_sly;
        }
    }
}
//]]>
</script>
<!-- Fine Emoticon nei commenti di Blogger by http://www.ideepercomputeredinternet.com -->

Finalmente si salva il modello. Alla fine di ciascun post subito sotto alla espressione Posta un commento o Numero dei commenti si visualizzerà un rettangolo simile a questo

con tutte le combinazioni di caratteri per creare ciascuna emoticon animata. Il rettangolo ha uno sfondo bianco. Se si vuole adattare a quello del nostro blog basta sostituire #FFFFFF dopo aver consultato il post sui codici dei colori. Il bordo ha lo spessore di un pixel, è formato da una linea continua è ha il colore #191919. Anche in questo caso si possono variare le impostazioni leggendo l'articolo sullo stile dei bordi. Credo di aver inserito tutte le 60 emoticon del Messenger di Yahoo. Se comunque ne vedete qualcuna che manca o ne volete aggiungere una nuova anche non di Yahoo, questo può essere fatto inserendo una nuova linea nel terzo codice con la stessa sintassi mentre opzionalmente può anche essere aggiunta nel secondo codice per mostrare ai lettori la combinazione di caratteri necessaria per generarla. Ovviamente la nuova emoticon dovrà avere un suo URL diretto per poter funzionare.