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.
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@Carlos Pavon Mira busca la siguiente linea
ResponderEliminar<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>
Funciona perfectamente y lo modifique un poquito se ve bien aqui: www.musicapic.net
ResponderEliminar@Gerardo N Genial, excelente si lo has modificado a tu gusto
ResponderEliminar:d
ResponderEliminarHola! como hago para añadirle los emoticones aque yo quiero T.T porfavor ayudame muchas gracias! :-?
ResponderEliminar@marianita conejita Wow que pregunta. La verdad que tendría que modificar todo el scrip y eso modificaría todo el tutorial.
ResponderEliminarLamento decirte que no se puede mostrar las emoticones que tu quieres
Lo voy a probar y te digo si me funciona o no :p
ResponderEliminar;(( 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@Anthony Martinez Ya debes de tener instalado el código JQuery, elimina el código Jquery
ResponderEliminar<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
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?
ResponderEliminarEl script utilizado para este tutorial es Ingles por lo que en el lenguaje antes dicho no se utiliza la Ñ ni las tildes
Eliminartení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.
EliminarUn saludo
OK deja la URL aquí y veremos
Eliminarhttp://publipruebas.blogspot.com.es/ ya nos cuentas a ver si ha habido suerte. Saludos
EliminarQue 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.
ResponderEliminarEste comentario ha sido eliminado por el autor.
EliminarMuchas Gracias funcionó perfectamente!! :)
ResponderEliminar;)
ResponderEliminarFernando, te pasaste compadre. Muy buen tutorial ;)
ResponderEliminarHe intentado muchas veces, pero no me resulta. Quiero cambiar esos emoticones por los de facebook. ¿Podrías ayudarme por favor?
ResponderEliminarGracias, 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.
ResponderEliminarTengo 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. :-)
funciona perfectamente pero como lo traduzco las frases al ingles?
ResponderEliminar