Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

En este tutorial veremos como agregar emoticones en la caja de comentarios con Jquery. Si ustedes buscan en google veremos muchas formas de agregar emotiones a nuestra caja de comentarios, como emoticones de yahoo, emoticones de facabook, ect.


La demostración la encontrar en nuestro blog: 

Comencemos: 


  • Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>.
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
</head>
  • Paso 4: Justo por encima de </ head> pegamos el siguiente código JQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Nota:- Para aquello que ya tengan agregado o instalado el código JQuery, ignore el paso anterior 

  • Paso 5: Justo debajo del código JQuery pegamos el siguiente código 

<script src='https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/EmoticonsKeren.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Para insertar emoticon debe añadir al menos un espacio antes del codigo.";
//]]>
</script>

  • Paso 6: Guardamos los cambios realizados en la plantilla.

Listo ya tendríamos la emoticones en la caja de comentarios en nuestro blog 

- - 23 Comentarios
Tag

Comentarios (23)

  1. Pos a mi no me funciono no se porque aunque te digo que mi jquery se encuentra casi al inicio de mi plantilla y no arriba de Head no se si ese sera el problema ¿Tendria que cambiarla de lugar o que?

    ResponderEliminar
  2. @Carlos Pavon Mira busca la siguiente linea

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    Eso quiere decir que ya lo tienes agregado solo tienes que agregar justo debajo del código lo siguiente

    <script src='https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/EmoticonsKeren.js' type='text/javascript'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Para insertar emoticon debe añadir al menos un espacio antes del codigo.";
    //]]>
    </script>

    ResponderEliminar
  3. Funciona perfectamente y lo modifique un poquito se ve bien aqui: www.musicapic.net

    ResponderEliminar
  4. @Gerardo N Genial, excelente si lo has modificado a tu gusto

    ResponderEliminar
  5. Hola! como hago para añadirle los emoticones aque yo quiero T.T porfavor ayudame muchas gracias! :-?

    ResponderEliminar
  6. @marianita conejita Wow que pregunta. La verdad que tendría que modificar todo el scrip y eso modificaría todo el tutorial.


    Lamento decirte que no se puede mostrar las emoticones que tu quieres

    ResponderEliminar
  7. Lo voy a probar y te digo si me funciona o no :p

    ResponderEliminar
  8. ;(( No me Funciono, Bueno si me funciono en los comentarios, pero cuando puse el codigo, el Slideshow de mi blog dejo de interactuar, se quedaba estatico, el codigo interfirió en el slideshow y no se porque

    ResponderEliminar
  9. @Anthony Martinez Ya debes de tener instalado el código JQuery, elimina el código Jquery

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    Dinos si se resolvio el problema

    ResponderEliminar
  10. Interesante Blog, no lo conocía, una pregunta a mi los iconos se me ven perfectamente pero el texto que sale justo debajo (haga click para ver el código y la linea siguiente) las "tildes" y ñ me aparece un carácter raro con un interrogante. ¿Alguna sugerencia?

    ResponderEliminar
    Respuestas
    1. El script utilizado para este tutorial es Ingles por lo que en el lenguaje antes dicho no se utiliza la Ñ ni las tildes

      Eliminar
    2. tenía el mismo en una plantilla para blogger que finalmente no la apliqué porque no me convencía mucho la plantilla, pero la tengo totalmente traducida, en un blog de prueba, si quieres verla te puedo pasar la dirección por correo o una copia de la plantilla por si te interesaría probar sacarla, ya que yo no lo consigo.

      Un saludo

      Eliminar
    3. http://publipruebas.blogspot.com.es/ ya nos cuentas a ver si ha habido suerte. Saludos

      Eliminar
  11. Que tal amigo me funciono perfecto, "Pero" me dio problema con otro efecto que tengo en mi blog Mira.. Tengo un Indice efecto Acordeon en mi Blog todo perfecto hasta que puse tu codigo adios al acordeon se quedo estatico y no se recoge y digo que es tu codigo porque lo elimino de mi plantilla y el efecto acordeon regresa espero me puedas ayudar Saludos. PD: El efecto acordeon utiliza Jquery... lo saque de esta pagina http://tricksdonor.blogspot.com/2013/01/how-to-add-table-of-contents-for-blogger.html Si quieres publicalo en tu blog es un buen efecto.

    ResponderEliminar
  12. Muchas Gracias funcionó perfectamente!! :)

    ResponderEliminar
  13. Fernando, te pasaste compadre. Muy buen tutorial ;)

    ResponderEliminar
  14. He intentado muchas veces, pero no me resulta. Quiero cambiar esos emoticones por los de facebook. ¿Podrías ayudarme por favor?

    ResponderEliminar
  15. Gracias, ha funcionado perfectamente, después de dar vueltas y probar mil tutoriales y scrip di con el tuyo. Me costó lo suyo (dado que no tengo ni idea de código html) cambiar los emoticones por otros que me bajé de la red, pero al final salió. He puesto 13 caritas.

    Tengo una duda, al principio el listado de emoticones salía en la parte de arriba de la caja donde se escribe y ahora salen debajo, ¿porque? no he cambiado nada.

    Otra cosa, ¿hay alguna forma de que salgan también en las entradas?

    Lo dicho, gracias. :-)

    ResponderEliminar
  16. funciona perfectamente pero como lo traduzco las frases al ingles?

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar