Emoticones en el nuevo formulario de comentarios


Me preguntaban al correo si había alguna forma de añadir emoticones en el nuevo formulario de comentarios...Así que hoy voy a mostrarles una forma sencilla de agregarlos:

♠ Ingresamos a Diseño/ Edición de HTML y seleccionamos Expandir plantillas de artilugios.

♠ En la plantilla buscamos lo siguiente:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Y lo sustituimos por lo siguiente:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

♠ Buscamos </body> y antes de éste pegamos lo siguiente:
<script src='http://pauloens.110mb.com/codigosblog/smiley.js' type='text/javascript'/>

♠ Damos click en Guardar y listo, el código funcionará si hemos seguido adecuadamente los pasos y si tenemos los comentarios incrustados a continuación de las entradas.

Y el resultado es el siguiente; si quieres ver cómo se verá puedes verlo aquí



Muy bonito, verdad? Si tienen problemas, estaré gustosa de poder ayudarlos.

Lo vi en: Hacktime

59 opinaron:

G

Hola YK

Muy interesante el código, y también se ve sencillo de usarlo. Si tengo algún problema te aviso.

Besos .

Responder
Anónimo

Ya esta bien esto agrega las imagenes de los emos, pero no pueden usarse si antes no tienes el código metido en la plantilla ¿que codigo es?

Responder
Birdelo

Hola Yokasta?.

Pasando a saludarte y dejando mi huella por aca!!!.

Espero que andes muy y te estes ciudando un monto...

Responder
Nautilus

Me ha gustado esto de poner emoticonos en el blog :-) Yo también tengo un blog por blogger y porvaré a integrarlo, ya te diré qué tal me ha quedado! ^_^

Responder
Nautilus

Genial, lo acabo de poner y me ha quedao de lujo!! Muchas gracias ;-)

Por cierto, hay un pequeñísimo error y es que falta cerrar una etiqueta en el código. Se trata de la última etiqueta , faltaría cerrarla con . Sólo eso, es un pequeño detalle, sino blogger no deja que guardes la plantilla :-)

Gracias y un saludo ^_^

Responder
EDGAREL

P
E
R
D
O
N
!

S
I

S
A
L
E
N

L
A
S

C
A
R
I
T
A
S

G
R
A
C
I
A
S

Responder
Jéssica YK

» G: espero te sriva.

» Anónimo: sólo sigue los pasos de la entrada.

» Birdelo: gracias por la visita .

» Nautilus: gracias por avisarme; enseguida lo corrijo.

» Anónimo: si usas los emoticones de la entrada en tu blog verás que varios son gifs (se mueven); pero si te refieres a los que puse en mi formulario de comentarios, pues algunos si son gifs y otros no.

» EDGAREL: no salió ninguna carita :o gracias por la visita.

Para los Anónimos: por favor, la próxima vez , procuren tener su perfil activado o dejen un enlace a su blog para que pueda visitarlo

Saludos a todos

Responder
†♦÷[--_Kuwabara_--]÷♦†

buenas me sirvio mucho el Scrip pero tngo u problema

es el siguiente las caritas salen mas arriba de lo normal y no se por que si busce el cod 'comment-footer' Con Ctrl+f ya que con eso lo buscas mas rapido pero no se por que no me funciono del todo te agradesecia si me ayudara a ponerlo como corresponde

http://anime-invasion.blogspot.com/2009/08/naruto-shippuden-123.html#comments


Gracias de ante mano muy bueno tu blog :)

Responder
Jéssica YK

†♦÷[--_Kuwabara_--]÷♦†: he visto el blog que deseabas que revisara (http://anime-invasion.blogspot.com/2009/08/naruto-shippuden-123.html#comments) y vi que tienes razón, pero para poder ayudarte necesito una copia de la plantilla para cargarla en mi blog de pruebas y ver qué es lo que sucede.

Si deseas que te ayuda, envíame una copia de tu plantilla al correo de contacto que verás arriba, encima de la cabecera del blog.

S@lu2

Responder
kuwabara

vale muchas gracias te la envio ahorita

:)

Responder
Jéssica YK

kuwabara: voy a revisar mi correo para ver si llegó tu mensaje con la plantilla.

S@lu2

Responder
Josué

Hola Jéssica! con una pregunta: las lineas a borrar tienen que ser exactamente las mismas?
pregunto porque en mi blog hay algunas lineas que son diferentes :o y cuando borro esas lineas (las que más se parecen :D)
y las sustituyo por el nuevo código ni en vista previa se carga el blog :)

Responder
Jéssica YK

Josué: las líneas van a cambiar dependiendo qué plantilla sea. Para ayudarte, dime que plantilla usas: mínima, rounders, etc.

S@lu2

Responder
Josué

Estube probando, borre el código de esa sección y coloqué el código de los emoticones, lo que sale ahora es: El Tipo de elemento "b: includable" debe concluir a finales de igualación etiqueta ""

La plantilla la descargue de BT
Templates.

Responder
Jéssica YK

Josué: entonces en tu plantilla debe de estar el código, pero con otro nombre; tendría que verla para poder ayudarte.
Si deseas que te ayude, envíame una copia de la plantilla a mi correo para ver cómo puedo ayudarte.
Para descargar tu plantilla mira esta entrada.

S@lu2

Responder
Jósue

Hola Jéssica! con mucho gusto te envio una copia de la plantilla.

Responder
Jéssica YK

Josué: entonces esperaré cuando me la enviés para poder revisarla :)

S@lu2

Responder
€li@n@

no encuentro el codigo :((:((:((

Responder
Josué

Hola Jéssica! ya te envié la plantilla :D

Responder
Jéssica YK

» €li@n@: me pasé por tus dos blogs el de cine hindú y el de películas; lo que sucede es que no usas las plantillas de blogger por lo que el código no es el mismo, el código está pero con otro nombre. Tendría que revisarla para ver qué nombre le han puesto para indicarte qué código tienes que reemplazar. Si deseeas puedes enviarme la plantilla para ayudarte. Para descargar una copia de tu plantilla, mira esta entrada.

» Josué: revisaré mi correo y veré si llegó el mensaje.

S@lu2

Responder
Josué

Hola Jéssica, yo otra vez :D
no se si llegó correctamente la plantilla?
Saludos.

Responder
Jéssica YK

Josué: te envié la respuesta a tu correo, hace tiempo; quizás te llegó el mensaje como spam, sería bueno que lo revises.

Si no te llegó el mensaje, me avisas y te lo reenvío.

S@lu2

Responder
Josué

Gracias por el muñequito verde que se ve en la esquina del panel de mi blogger :)
Y tienes razón, el correo se había desviado al correo de spam
:), ya tenia tiempo de no ingresar a esa carpeta y al correo :D
lo pruebo y te cuento.

Responder
Jéssica YK

Josué: si tienes alguna duda o problema me avisas :)
Me avisas cómo te va con los emoticones

S@lu2

Responder
Anónimo

Ich meine, dass Sie den Fehler zulassen. Geben Sie wir werden es besprechen. Schreiben Sie mir in PM, wir werden umgehen. viagra online kaufen ohne rezept cialis generika indien [url=http//t7-isis.org]viagra[/url]

Responder
Tattyalbo

Hola está muyg bueno, pero se puede cambiar el color del background y de la fuente?

Responder
Jéssica YK

Tattyalbo:
Sí, se puede cambiar el color de fondo, fíjate en esta parte del código:

text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86

Cambia lo que está resaltado en negrita por otro color; como el fondo de tu blog es negro, quizás puedas usar ese color (negro), entonces lo reemplazarías por #000000 o si quieres usar otro color, puedes guiarte por esta tabla de colores .

Para cambiar el color de la letra, pega color: #ffffff; antes de text-align: left;

Si tienes otra consulta me avisas.

S@lu2

Responder
Tattyalbo

Graxx, ahí se ve mucho mejor. lo que se me olvidó poner antes era que a las plantillas descargadas de Internet no se podía poner una ventana incrustada aunque estuviera habilitadp: "Publicar páginas", por eso después busqué y había que reemplazar esto para las plantillas que no se podían poner mensajes incrustados (porque eran descargados desde internet):



cambiarlo por:








y ahí me resultó.

x si le sirve a alguien...

Responder
Tattyalbo

no se ven los códigos xD, pero si le pasa a alguien busquen por:

El formulario de comentario incrustado no se puede utilizar si está inhabilitado "Publicar páginas".

y ahí sale la solución

Responder
Pabela

Hola!!! qué suerte que comentaste en mi blog porque justo iba a hacerte una pregunta y al final no pude hacerme el tiempo y ya me estaba olvidando. Bueno la cosa es que puse los emoticones y sale la opción perfecta y sin dramas salvo, salvo que cuando escribí un comentario para probarlo no me salieron, es decir solo salió el símbolo, como si no lo hubiera traducido!!! =( Qué hice mal??

Responder
Jéssica YK

» Tattyalbo:
Disculpa no leí tu comentarios. Gracias por la información.

S@lu2

Responder
Jéssica YK

» Pabela:
En cuál de tus blogs aplicaste el código, porque en La Cinerata no vi los emoticones.

S@lu2

Responder
Pabela

Jéssica en los de la cinerata pero los quité :S porque justamente no me andaba jejeje pero si necesitas que lo vuelva a poner para ver qué anda mal me avisas y los vuelvo aponer.

Responder
Tattyalbo

ah, de nada...

disculpa 1 pregunta... sabes como puedo mostrar un mensaje (pero no del tipo windows), cuando se entra con un navegador como IE, lo que pasa es que estoy haciendo un blog relacionado con una página que cree en facebook y es incompatible sólo con ese navegador...

http://lomejordelpower.blogspot.com/ (este es)

bueno, eso sería

Salu2

Responder
Pabela

Jessica, otra vez yo (re pesada!!) te cuento que ya instalé de nuevo los emoticones pero me sucede lo que te decía. Sale el símbolo pero no el dibujo "traducido" por decirle de alguna manera. Lo dejo para ver si le encuentras qué está mal. Un abrazo.

<a href="amo-el-cine.blogspot.com>La Cinerata</a>

Responder
Jéssica YK

» Pabela:
Entonces revisaré tu blog para ver cuál es el problema :)

S@lu2

Responder
Jéssica YK

» Tattyalbo:
Un ejemplo de cómo quisieras que sea el mensaje de alerta, alguna página?
Quisiera saber a qué mensaje tipo de mensaje te refieres para poder ayudarte :)

S@lu2

Responder
Tattyalbo

ahora que lo pienso, no me acuerdo donde lo vi xD, pero tal vez podria ser mostrar una imagen en medio (ahi editaria el contenido) con 1 par de links para los navegadores compatibles, no sé si se puede...

aunque ahora que lo pienso algo más fácil (creo) sería la imagen que siga al mouse con los links

eso sería

salu2

Responder
Jéssica YK

» Pabela:
Estuve viendo tu plantilla y a simple vista no hay ningún problema; luego instalé el script en otra plantilla, para ver si seguí funcionano el link donde está alojado el archivo .js pero todo estaba bien.
Así que para ayudarte tendrás que enviarme una copia de tu plantilla a mi correo, el mismo que aparece en la parte superior de este blog.

» Tattyalbo:
Una imagen y links; sí creo que sería posible. Voy a pensar en alguna forma para ayudarte.

S@lu2

Responder
tattyalbo

graxx, esa opcion era la que despues queria y se me habia olvidado poner xD

Responder
Pabela

Millón de Gracias!!! dale ahora te mando un copia de la plantilla. Instalé todo en Http://butacasdeluz.blogspot.com y anda de maravillas asique síp, debe ser lo del slide.
Te agradezco la super buena onda y no quiero tampoco meterte presión para que lo resuelvas, es que hace mucho que venía queriendo poner emoticones en comentarios y ahora que encontré uno que anda jajajaja!
Un abrazote.

Responder
Tattyalbo

hola....hace tiempo que no me escribia....

hola.... yo estoy usando otro tipo de emoticones en mi nuevo blog (con javascript), la verdad no m acuerdo que codigo era.. (en esta entrada tengo los ejemplos:http://goo.gl/ySA7)
lo que me pregunto es si sabes como se puede hacer para que al hacer click en el icono se inserte el codigo en el formulario(ej: http://goo.gl/8tdj)

gracias de antemano

Salu2

Responder
Jéssica YK

» Tattyalbo:
Seguro que debe de ser posible; si usas javascript para los emoticones habría que modificarlo para lograr que los emoticones aparezcan, pero no sabría decirte cómo.

S@lu2

Responder
Tattyalbo

oks.... graxx = .... ahora estoy viendo el tutorial de js en desarrollo web xD

lo que debe ser es algo como un evento onclick sobre las imagenes y que cambie el value de donde se deja el mje.... cuando avanze + en la guia lo pruebo xD

Responder
♥ Ana

Hola Jéssica, ayer puse éste truco en mi blog , y me funcionaba a la perfección pero, hoy, sin previo aviso ha dejado de funcionar y veo que en la página donde pones que se ven, tampoco funcionan y, sin embargo, ayer si que funcionaban, imagino que será algún problema con el script, ¿sabes algo de ello?
De todas maneras, muchas gracias por el truco, em encantaron éstos emoticones con movimiento, aunque me han durado muy poquito, jejeje
Un saludo

Responder
Jéssica YK

» Tattyalbo:
Espero que consigas aplicarlo a los emoticones; suerte con el estudio.

S@lu2

Responder
Jéssica YK

» Ana:
He ingresado a tu blog y los emoticones estaban funcionando perfectamente, al igual que en mi blog de pruebas; o tal vez ya solucionaste el problema.

S@lu2

Responder
♥ Ana

Jessica ,al final, los tuve que cambiar, seguían sin funcionar, los que están ahora, no son los tuyos, el caso es que veo que ahora si que funcionan en tu blog de pruebas, en fin, serán cosas de la informática que, a mi , me vuelve loca, jejejeje, o igual hice algo mal
Muchas gracias por tu respuesta y perdona por no haberte avisado , hice el cambio hace un par de días, tenía que habértelo dicho para que no te tomaras la molestia de contestarme, ha sido un descuido por mi parte, perdona :$

Responder
Lilith Cromwell

Hola
Eh visto este blog un par de veces (y usado los tutoriales también) y estaba implementando este de los emoticones y tengo un problema.
Puedes ver aquí http://thedarksidenovels.blogspot.com/2010/11/autores-aninomos.html que aparece la barra de los emoticones con mis imágenes pero cuando hay un comentario aparecen tus emoticones.
Intente buscar en mi plantilla la url de tus emoticones pero no aparece, aparecen mis links de emoticones y no sé cómo arreglarlo

espero tu respuesta

-Lilirh

Responder
Jéssica YK

» Ana
Lo importante es que hayas solucionado el problema! Gracias por la visita y los comentarios.

S@ludos

Responder
Jéssica YK

» Lilith Cromwell
¿Cambiaste las url de las imágenes por las de tus emoticones?
Puede que ese sea el problema; inténtalo y si persiste, puede que tengas que editar el archivo .js
Si continúa el problema, ya te indicaré cómo cambiar el mencionado archivo.

S@ludos

Responder
Lilith Cromwell

Gracias por responderme tan pronto
y si cambie todas tus imagenes par las mias
incluso busque la url de la imagen que me aparese como emoticon en los comentarios, pensando que quiza ese emoticon estaba incorrecto pero no aparese esa imagen en mi plantilla, asi que no entiendo cual es el problema

Responder
Jéssica YK

» Lilith Cromwell:
Ya veo, has modificado las url del código que va en la Plantilla pero también tienes que modificar el código del archivo .js

En la entrada, en uno de los pasos debías de agregar este código:
<script src='http://pauloens.110mb.com/codigosblog/smiley.js' type='text/javascript'/>

Hay que modificar ese archivo .js.

Para modificarlo, entra a este link:
http://pauloens.110mb.com/codigosblog/smiley.js

Verás que aparece un código largo. Ese código copialo y pégalo en el Block de Notas. Ahora sustituye las url de las imágenes por las url de las imágenes de tus emoticones.
Guarda el archivo con extensión .js
Por ejemplo guardalo como smiley.js
Ahora lo subes a tu alojamiento de archivos, copias la url y reemplazas lo que está en negrita por la url:

<script src='http://pauloens.110mb.com/codigosblog/smiley.js' type='text/javascript'/>

Si no tienes algún alojamiento, entonces lo puedes pegar en la plantilla directamente.
Lo que tienes que hacer es copiar el código modificado del Bloc de notas y lo pegas de la siguiente forma, encima de </head>:

<script type='text/javascript'>
//<![CDATA[
Aqui pegas el código
//]]>
</script>

Si tienes dudas me avisas.

S@lu2

Responder
Kaede

Una pregunta.. ¿puedo agreagar mas emoticnes, o cinluso cambiar los que contiene el codigo?

Responder
Jéssica YK

» Kaede:
Sí, puedes reemplazar los emoticones por otros; sólo sigue las instrucciones que le di a Lilith Cromwell en el mensaje anterior al tuyo. Si necesitas ayuda, me avisas.

S@lu2

Responder
Kaede

Pues si que la necesito xD. Me sale el error de 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: XML document structures must start and end within the same entity.

y no se que hace DX

Responder
Solcito Escribe

MMMM... no me andubo, porque busque con CTRL+F
y copie y pegue eso pero no lo encontro, yo uso blogger, el blog es de mi escuela osea de mis compañeras pero lo hice yo, bueno quiero saber que hago...:( :)

Responder
Alexis

Hola, tanto tiempo!!, hace tiempo que no necesitaba ayuda xD...bueno, lo que ocurre es que tengo problema con el link hacia el js "http://pauloens.110mb.com/codigosblog/smiley.js" al parecer ya no existe esa dirección, por casualidad no tendrás algún respaldo de eso??

Saludos

Responder
Alexis

Me respondo a mí mismo xD... busqué el sistema y encontré el archivo en otro servidor, lo subiré a mi Dropbox para mayor seguridad, creo que por esto también es que había aumentado mucho el tiempo de carga de mi blog, ya que no lo encontraba.

Si alguien necesitaba el archivo acá está:

"http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js"

Salu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio