Cómo poner emoticonos en tu blog de blogger


Si quieres añadir emoticonos para los comentarios de tu blog de blogspot debes hacer lo siguiente:






Nota: Actualmente hay en plantillas que no funciona por algún script o modificación en las plantillas. Estoy tratando de buscar una mejor opción. Lamento las molestias ocasionadas. De todas formas pruébalo porque en tu blog puede funcionar sin problemas.



1)
Vamos a Diseño2) Edición de HTML -> Marcamos la casilla "expandir artilugios".
3) Buscamos el código </head> (tecleamos Ctrl + F para buscar más rápido)
4) Antes de </head> pegamos el siguiente código:


<!-- (Script Emoticones) -->
<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

function addSmiley(){
  var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
  var d = document.getElementsByClassName(postBodyClass);
  for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/:-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-S/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-P/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-[/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/}:-]/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x*/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/;-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-|/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-}/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:*)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/:-(/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/;-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }

var d = document.getElementsByClassName('comment-body');
  for(var i=0;i<d.length;i++){
 d[i].innerHTML = d[i].innerHTML.replace(/:-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-S/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-P/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-[/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/}:-]/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x*/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/;-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-|/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-}/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:*)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/:-(/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/;-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(addSmiley);
//]]>
</script>
<!-- (Fin Script Emoticones) -->



5) Ahora buscamos <p><data:blogCommentMessage/></p> y justo antes pegamos el siguiente código:



<!-- ini tabla emoticones -->
<table border='0' cellpadding='0' cellspacing='1'>
  <tr>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif' width='20'/></td>
    <td align='center' width='26'><img height='20' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif' width='20'/></td>
  </tr>
  <tr>
    <td align='center' width='26'>:-)</td>
    <td align='center' width='26'>:-S</td>
    <td align='center' width='26'>:-P</td>
    <td align='center' width='26'>:-[</td>
    <td align='center' width='26'>:-D</td>
    <td align='center' width='26'>}:-]</td>
    <td align='center' width='26'>X*</td>
    <td align='center' width='26'>;-D</td>
    <td align='center' width='26'>:-|</td>
    <td align='center' width='26'>:-}</td>
    <td align='center' width='26'>:*)</td>
    <td align='center' width='26'>:-(</td>
    <td align='center' width='26'>;-)</td>
    <td align='center' width='26'>XD</td>
  </tr>
</table>
<!-- fin tabla emoticones -->






Clicamos en vista previa y si todo está bien, guardamos la plantilla.


Gracias a trucosgeek.

19 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. hola no puedo habilitar para que los usuarios pbliquen comentarios, ya revsie la configuracion y etsa todo bien

    ResponderEliminar
  3. Hola Luisito. ¿En cuál de tus blogs tienes ese problema?

    Trata de ir a: Configuración->Comentarios->Ubicación del formulario de comentarios-> y cámbialo a Ventana emergente.

    Dime cosas. Un saludo.

    ResponderEliminar
  4. Hola sabes agrege todo como lo dice hay quedoo perfecto pero ha un problema xD cuando pongo la cara de los iconos :) ;) no me salen los iconos en las entradas solo salen si :) ... por que sera ? si me podrias decir para solucionarlo


    muchas gracias por el post tu blog es muy bueno

    ResponderEliminar
  5. Hola TheTrue. Esto sólo sirve para los comentarios. Acabo de probarlo en tus comentarios y no te funciona. Inestigaré a ver qué ocurre. Hay en blogs que funciona y en otros no.

    Lamento las molestias ocasionadas.

    ResponderEliminar
  6. vale amigo no es molestia gracias por responder estare entrando a ver si se puede arreglar

    saludos =)

    ResponderEliminar
  7. Gracias por tu comprensión. Un saludo amigo.

    ResponderEliminar
  8. En mi blog no funcionaron los emoticones, pero espero que puedas conseguir otros que funcionen bien en los blogs. Un saludo Juan, tu blog es el mejor.

    ResponderEliminar
  9. Hola Andrea. Gracias por tus comentarios. Estos emoticiones desafortunadamente no funcionan en todas las plantillas. Buscaré alternativas y las pondré. Saludos.

    ResponderEliminar
  10. em quierocrearunblog
    quiero saber como poner esos emoticons en las entradas
    e visto que en varios blogs estan en las entradas
    me pudes ayudar?
    Gracias!

    ResponderEliminar
  11. Hola Pinguinito. Me apunto tu sugerencia.

    Saludos.

    ResponderEliminar
  12. Oh, gracias por subir éste post, ahora mi blog tiene más vida... lastimosamente no hay mucha gente que comente :(

    ResponderEliminar
  13. Hola!.. talvez esto sonara muy tonto, ¿pero a mas o menos en que parte hay que poner la segunda parte del codigo? ... es que no la encuentro, y aso no puedo insertarlos =(

    ResponderEliminar
  14. los sacaron de photobucke, y ya no se ven T_T remplazando la direccion seria posible ponerle otros emoticones?

    ResponderEliminar
  15. Muy bueno , lo quise hacer hace tiempo , pero me sigue tirando el mismo error:

    "No hemos podido guardar tu plantilla

    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "b:if" must be followed by either attribute specifications, ">" or "/>".

    ResponderEliminar
  16. Ya tengo los emoticones, pero el problema es que cuando agregue mas, solo se vio uno que agruuegue por la mitad.. parece que es el ancho de la tabla o algo asi.. me digeron que lo puedo solucionar con el colspan (agregando celdas y etc), pero no se muy bien del tema..colspan='10'/>
    <td colspan='3'

    ResponderEliminar
  17. Esta vez, lo hice pero no se ven los emoticones ,No me funciona

    ResponderEliminar
  18. Hola disculpa que comente en esta entrada pero necesito una ayuda es que me gustaria poner algo asi en mi blog como lo tienes aqui (NORMAS PARA COMENTAR)

    que arriba de publicar un comentario este eso?

    Si me entendiste bien por favor me podrias enviar a este correo trabajos-web@hotmail.com

    ResponderEliminar