Agrega tus propios Emoticones a tu blog

Muchos bloggers buscan agregar emoticones en su blog,pero para ello dependen de blogs de ayuda bloggers para poner emoticones en sus blogs pero hoy les voy a enseñar como agregar sus propios emoticones a sus blogs.

El siguiente codigo corresponde al script que utilizaremos para hacer el llamado del emoticon al blog:

*/


function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

emoticon = bodyText.innerHTML;

// :) :-) :-]
emoticon = emoticon.replace(/:\)/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');
emoticon = emoticon.replace(/:-\)/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');
emoticon = emoticon.replace(/:-\]/g,'<img src="http://static.mobile9.com/bbcode/smileys/smile.gif" />');

// X(
emoticon = emoticon.replace(/X\(/g,'<img src="http://static.mobile9.com/bbcode/smileys/tongue.gif" />');


// :cool:
emoticon = emoticon.replace(/:cool:/g,'<img src="http://static.mobile9.com/bbcode/smileys/wink.gif" />');

// :cry:
emoticon = emoticon.replace(/:cry:/g,'<img src="http://static.mobile9.com/bbcode/smileys/laugh.gif" />');


// :blaf:
emoticon = emoticon.replace(/:blaf:/g,'<img src="http://static.mobile9.com/bbcode/smileys/frown.gif" />');

// :winky:
emoticon = emoticon.replace(/:winky:/g,'<img src="http://static.mobile9.com/bbcode/smileys/thumbup.gif" />');

// :noo:
emoticon = emoticon.replace(/:noo:/g,'<img src="http://static.mobile9.com/bbcode/smileys/blush.gif" />');

// :twisted:
emoticon = emoticon.replace(/:twisted:/g,'<img src="http://static.mobile9.com/bbcode/smileys/byebye.gif" />');

Lo que esta en azul corresponde a la URL del emoticon,alli es donde debes poner la URL de tu emoticon (en la primera parte del codigo tienes que repetir la URL de la imagen 3 veces,de aqui en adelante solo tendras que poner la URL solo una vez).

Lo que esta en rojo corresponde al codigo que se utilizara en los comentarios para que aparezca el emoticon.

Luego guardas el archivo en un editor de texto (ej. Bloc de Notas) con extension .js y lo subes a un hosting como Dropbox o Google Sites,alli te dan la URL y la tendras que pegar antes de </body> siguiendo la siguiente estructura.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='URL DEL ARCHIVO .JS' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Con esto ya tendras listo los emoticones pero ahora hace falta mostrar una lista de los emoticones para que los lectores los puedan usar.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != &apos;&apos;) { this.parentNode.nextSibling.childNodes[0].style.display = &apos;&apos;; } else { this.parentNode.nextSibling.childNodes[0].style.display = &apos;none&apos;;}' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPRvv9pGTjAEzol7a2lx7hBcXh-zRXOTOOXe7UDGjpM3CMmCEmQXrx4JHaZbrptgzMUcXamiKXROzb-AVq1uTsEKl9NNJE_LthKQCxIkvdwvXDLNuEOANTFvMyJ23eiLAJ4r2xJt83gI/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/>  :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>

</div></div>
</b:if>

Lo que esta resaltado en verde es la URL del emoticon y lo que esta en rosa es el codigo del emoticon.

El anterior codigo lo deberas pegar debajo de 

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

Con esto ya hemos terminado el tutorial  y tendras listo tus emoticones ,espero que les haya sido de utilidad.