Emoticones de Facebook en tu Blog de Blogger

]]></b:skin>

Y justo arriba de esa línea agregan los siguientes estilos:

.emoticon {background-image:url(https://sites.google.com/site/filesimges/img/emoticones.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:16px;width:15px; position:relative;
}
.feliz {background-position: 0 -1px;}
.triste {background-position: -237px -1px;}
.guino {background-position: -16px -1px;}
.lengua {background-position: -32px -1px;}
.feliz2 {background-position: -49px -1px;}
.raro {background-position: -65px -1px;}
.asombro {background-position: -82px -1px;}
.confundido {background-position: -99px -1px;}
.llorando {background-position: -116px -1px;}
.enojado {background-position: -134px -1px;}
.beso {background-position: -151px -1px;}
.lentes {background-position: -167px -1px;}
.angel {background-position: -184px -1px;}
.diablo {background-position: -202px -1px;}

Como ven, no utilicé ID's, ya que quiero usar solo una imagen para los emoticones, y utilizarla como background. Una ventaja es que solo uso una imagen; y otra, es que se podrán probar los emoticones. Para que salga cada emoticón, utilizo esta imagen: https://sites.google.com/site/filesimges/img/emoticones.png y solo coloco un atributo "bakground-position", que hace que en cada clase cambie de posición la imagen de fondo. Bueno, ya está el css. Ahora tienen que agregar el script, y para esto, buscan:

</body>

Justo arriba de eso, agregan el siguiente código javascript:

<script>
//<![CDATA[
/* Emotíconos para los comentarios anidados en blogger.
*/
function emoticonComentario() {
if(!document.getElementById) {return;} // no soportado
bodyText = document.getElementById('comments');
emoticon = bodyText.innerHTML;
// :) :-) :-]
emoticon = emoticon.replace(/:\)/g,'<span class="emoticon feliz"></span>');
emoticon = emoticon.replace(/:-\)/g,'<span class="emoticon feliz"></span>');
emoticon = emoticon.replace(/:-\]/g,'<span class="emoticon feliz"></span>');
// :p      :P
emoticon = emoticon.replace(/:p/g,'<span class="emoticon lengua"></span>');
emoticon = emoticon.replace(/:P/g,'<span class="emoticon lengua"></span>');
// :(
emoticon = emoticon.replace(/:\(/g,'<span class="emoticon triste"></span>');
// ;)
emoticon = emoticon.replace(/;\)/g,'<span class="emoticon guino"></span>');
// XD       xD      xd      Xd  
emoticon = emoticon.replace(/XD/g,'<span class="emoticon raro"></span>');
emoticon = emoticon.replace(/xD/g,'<span class="emoticon raro"></span>');
emoticon = emoticon.replace(/xd/g,'<span class="emoticon raro"></span>');
emoticon = emoticon.replace(/Xd/g,'<span class="emoticon raro"></span>');
// :s       :S
emoticon = emoticon.replace(/:s/g,'<span class="emoticon confundido"></span>');
emoticon = emoticon.replace(/:S/g,'<span class="emoticon confundido"></span>');
// x(       X(
emoticon = emoticon.replace(/x\(/g,'<span class="emoticon enojado"></span>');
emoticon = emoticon.replace(/X\(/g,'<span class="emoticon enojado"></span>');
// :'(
emoticon = emoticon.replace(/:'\(/g,'<span class="emoticon llorando"></span>');
// :D       :d
emoticon = emoticon.replace(/:D/g,'<span class="emoticon feliz2"></span>');
emoticon = emoticon.replace(/:d/g,'<span class="emoticon feliz2"></span>');
// 8)
emoticon = emoticon.replace(/8\)/g,'<span class="emoticon lentes"></span>');
// :O       :o
emoticon = emoticon.replace(/:\O/g,'<span class="emoticon asombro"></span>');
emoticon = emoticon.replace(/:\o/g,'<span class="emoticon asombro"></span>');
// :*
emoticon = emoticon.replace(/:\*/g,'<span class="emoticon beso"></span>');
// :A       :a
emoticon = emoticon.replace(/:A/g,'<span class="emoticon angel"></span>');
emoticon = emoticon.replace(/:a/g,'<span class="emoticon angel"></span>');
// 3D       3d
emoticon = emoticon.replace(/3D/g,'<span class="emoticon diablo"></span>');
emoticon = emoticon.replace(/3d/g,'<span class="emoticon diablo"></span>');
// :E       :e
emoticon = emoticon.replace(/:E/g,'<span class="emoticon feliz3"></span>');
emoticon = emoticon.replace(/:e/g,'<span class="emoticon feliz3"></span>');

bodyText.innerHTML = emoticon;
}
//]]>
</script>
<script type='text/javascript'>
emoticonComentario();
</script> 

Listo, ya tienen el script. Se los dejo de esta manera para que puedan editarlo. Lo que hace este script es lo siguiente: por ejemplo, en la carita feliz, reemplaza :) por la carita feliz. Y bien, ya tienen los emoticones en los comentarios de Blogger.
Ahora pasaremos a la segunda manera de agregarlos. Buscan:

</body>

Y justo arriba agregan:

<!-- INICIO EMOTICONES -->
<link href='https://dl.dropboxusercontent.com/s/n0353hqmxx6jcsk/emoticones.css' rel='stylesheet' type='text/css'/>
<script src='https://dl.dropboxusercontent.com/s/piia6yt1icm8tfi/emoticones.js' type='text/javascript'></script>
<script type='text/javascript'>
        emoticonComentario();
  </script>
<!-- FIN EMOTICONES -->  

Y listo, de esta forma también tendrán los emoticones de Facebook en los comentarios de Blogger. La única diferencia es que si quieren modificar el script, deberán descargarlo y volver a subirlo a algún host desde el cual se puedan ver los archivos sin descargarlos, por ejemplo, Dropbox.
Bueno, esto es todo en este tutorial, espero que les sirva y que lo usen. Para ver el DEMO, revisen el comentario de prueba en esta misma entrada.