Pubblicato il 16/11/12e aggiornato il

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
emoticon-combinazione-tasticon 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.




5 commenti :

  1. mi piacciono molto di più queste emoticon per il blog ;)

    RispondiElimina
  2. ciao ernesto ti ho inviato un messaggio su facebook dove ti chiedo aiuto su certi codici riguardante questo tutorial saresti cosi gentile da controllarmeli perfavore :D

    RispondiElimina
    Risposte
    1. @# La demo che si trova in questa pagina
      http://verypretty-blog.blogspot.com/2012/06/demo-su-come-tornare-inizio-pagina-con.html
      funziona bene. Ho appena provato a inserire un paio di emoticon. In questi casi poi si sa ogni modello fa storia a sé. Può darsi che nel tuo non funzionino :(

      Elimina
    2. ho provato con i tuoi codici e funzionano ho provato con quello che ho modificato io e non funge sicuramente ci sarà qualche errore nella seconda parte del codice che ho modificato io potresti controllarlo gentilmente :D

      Elimina
    3. ti ho inviato i file su facebook

      Elimina

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.