Emoticonos Para el Nuevo Blogger

Después de buscar como una loca y leyendo cositas en inglés, mirando código y todo para darle vidilla a mi blog, y que mejor si no! que con unos emoticonos, eso sí este funciona para el nuevo blog, para los antiguos, es seguir los pasos que vienen en Free BlogSpot Templates.
Estos códigos se visualizan cuando el Webmaster escribe y también en comentarios (si se está dentro de los post).

Estos son los paso que hice, son muy simples :P

1. Lo primero es ir a "Plantilla" -> "Elementos de página" --> "Añadir un elemento de página" -->"HTML/javascript"
   
2. Lo segundo será copiar y pegar el siguiente código.

<!--BloggerEmoticons-->

<script type="text/javascript">

<!--

function replaceText() {

if(!document.getElementById) {

return;

}


bodyText = document.getElementById("body");

theText = bodyText.innerHTML;

theText = theText.replace(/;\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";)" />');

theText = theText.replace(/;-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');

theText = theText.replace(/:D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":D" />');

theText = theText.replace(/:-D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":-D" />');


theText = theText.replace(/B\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B)" />');

theText = theText.replace(/B-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B-)" />');

theText = theText.replace(/:x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":x" />');

theText = theText.replace(/:X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":X" />');

theText = theText.replace(/:-x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-x" />');


theText = theText.replace(/:-X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-X" />');

theText = theText.replace(/:-\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":-(" />');

theText = theText.replace(/:\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":(" />');

theText = theText.replace(/:o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":o" />');

theText = theText.replace(/:O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":O" />');


theText = theText.replace(/:-o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-o" />');

theText = theText.replace(/:-O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-O" />');

theText = theText.replace(/:p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":p" />');

theText = theText.replace(/:-p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-p" />');

theText = theText.replace(/:-P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-P" />');


theText = theText.replace(/:P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":P" />');

theText = theText.replace(/:-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":-)" />');

theText = theText.replace(/:\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":)" />');

bodyText.innerHTML = theText;

}

-->


</script>

<!--BloggerEmoticons-->

En los códigos originales, muestra un borde en cada imágen, yo modique ese código para evitar eso, le añadi style="border:none", entre img y src, (que quiere decir que le quites el borde :P ) y lo tuve que hacer con cada uno de los códigos.
Y quedaría como este:

theText = theText.replace(/xD/g,'<img style="border:none"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhlSX96JsGlNakjmMR4SFjTf1I9Re2RYqiHZk4OjWjFEZUxmwrG9KNr2jrXRpkufjpQmjtnUfz8GbEpLjH7iNHSJTM093oTZ7lCzWcbF5CG9errBNXw2Z_56baNqOBaxZpocb5fhbXEi5/s200/xxd.gif" alt="xD" />');

3.- Y por último, "Plantilla"--> "Edición Html" --> buscas la etiqueta body y pegas este código

 <body id="body" onload="replaceText();">

Guarda los cambios y listo! ya tienes emoticonos en tu Blog :D

Los códigos

Yo le añadi 4 más, obviamente hay que saber como tocar el código :)

Links:

• Ojo Buscador
• Free BlogSpot Templates.