Desde hace tiempo quería implementar los empoticonos en los comentarios de mi blog, pero nunca lo había hecho, ya que lo que se hacía era cargar una gran cantidad de imágenes por separado. Mi idea era poder usar sprites.

De esta manera nó solo lo he conseguido, sino que he reducido muchísimo la función que propuso en su día JMiur, haciéndola compatible para todos sus métodos.

Si se usan comentarios anidados

Para usarlos tenéis que copiar esto justo después de <data:post.commentHtml/>. Luego acordaos de copiar el CSS (más abajo)

<script type="text/javascript">
//<![CDATA[
var emoticonActual = 0;
function emoticonComentario(el) {
    var elem = typeof el === "string" ? document.getElementById(el) : el,
    texto = 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|:-\\/"],
    clases = "sonrisa lloro triste lengua riendo oops guino neutral secreto sorpresa enfadado confuso".split(" "),
    i = 0,
    reg
    for(; regs[i]; i++){
        reg = new RegExp("("+regs[i]+")(\\s|$)", "gi")
        texto = texto.replace( reg, function(){emoticonActual++;return "<i class='icon "+ clases[i] +"' id='icon"+(emoticonActual).toString()+"'><\/i> "})
    }
    elem.innerHTML = texto
}
//BORRAR SI NO SE USAN LOS COMENTARIOS ANIDADOS
//En el caso de mi blog sirven porque tengo un <p> en cada comment-body
function emot_anidados(){
    var comentarios = document.getElementById('comments-block') || document.getElementById('comment-holder' ) , i = 0;
    comentarios = comentarios.getElementsByTagName('p')
    for(; comentarios[i]; i++){
        emoticonComentario(comentarios[i])
    }
}
emot_anidados()
//]]>
</script>

Si no se usan

En ese caso recomiendo leer la entrada de Vagabundia. sólo tenéis que cambiar la función emoticonComentario que él propone por la mía.

Importante! El CSS

Si hemos hecho esto es para usar una sóla imagen, pero la imagen la tenemos que poner mediante CSS, que tendréis que copiar encima de </b:skin>:

i.icon{
    width:15px;height:15px;
    background-image:url(http://4.bp.blogspot.com/-tHBJlzvjCt0/T3nFzbRzdWI/AAAAAAAAAPM/lIYAw-pjYyE/s1600/csg-4f79c33464324.png);
    background-repeat:no-repeat;
    display: inline-block;
}
i.icon.confuso{ background-position: 0 0;  } 
i.icon.lengua{ background-position:-15px 0;  } 
i.icon.enfadado{ background-position: -30px 0;  } 
i.icon.lloro{ background-position: -45px 0;  } 
i.icon.guino{ background-position: -60px 0;  } 
i.icon.neutral{ background-position:-75px 0;  } 
i.icon.oops{ background-position: -90px 0;  } 
i.icon.riendo{ background-position: -105px 0;  } 
i.icon.secreto{ background-position: -120px 0;  } 
i.icon.sorpresa{ background-position: -135px 0;  } 
i.icon.sonrisa{ background-position: -150px 0;  } 
i.icon.triste{ background-position: -165px 0;  }