Emoticones de Facebook en los comentarios de Blogger


Hola. ¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Bueno, hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata de cómo hacer para que cuando nos dejen un comentario, nuestros lectores puedan adornar sus comentarios con emoticones, pero con los que vemos en facebook. Es muy fácil de implementar. Y es válido en los comentarios anidados de Blogger.

( Ver DEMO)
facebook, emoticons, blogger, web

Bueno, empecemos.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </body> y justo encima de éste, pegaremos el siguiente script:


3.§ Ahora vamos a colocar la imagen que le indicará a nuestros lectores cómo pueden colocar un emoticón en su comentario. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos <p><data:blogCommentMessage/></p>. En la plantilla veremos que hay cuatro líneas de código iguales. Buscaremos la segunda y debajo, pegaremos este código:
<p style=' border:0px;margin:0px 10px 0px 100px; '><img src='URL-IMAGEN'/></p>
Donde dice URL-IMAGEN, lo reemplazaremos por una de estas dos imágenes. La primera es para lo que tienen en su blog un fondo blanco o claro; la segunda es para los que tienen en su blog un fondo negro u obscuro:

» Imagen para blog con fondo claro:
http://1.bp.blogspot.com/-fhfGcBKcswE/Vd5NH8CGgMI/AAAAAAAACWc/Qni7BYbiewU/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:
http://2.bp.blogspot.com/-DKBCpbjkq70/Vd5NIMvfhAI/AAAAAAAACWg/TDEztsf8oRo/s1600/diyva_jessica_motic_fondnegro.png
Para centrarlas o ubicarlas a la posición que queremos, bastará con cambiar los valores margin: 0px 10px 0px 100px.

4.§ Nuevamente, damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos nuevamente esta línea de código:
<p><data:blogCommentMessage/></p>.
Esta vez buscaremos la cuarta y debajo pegaremos lo siguiente:
<p style=' border:0px;margin:0px 10px 0px 200px; '><img src='URL-IMAGEN'/></p>
Reemplazamos URL-IMAGEN por la misma imagen que utilizamos en el paso anterior.

5.§ Ahora, para que los emoticones no aparezcan debajo de la caja de comentarios después de dejar el primer comentario, haremos lo siguiente. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos la siguiente línea:
document.getElementById(domId).insertBefore(replybox, null);
Y la reemplazaremos por esta línea de código:
document.getElementById(domId).insertBefore(replybox.parentNode, null);
6.§ Damos clic a Guardar y eso es todo. Espero que les haya gustado el tutorial. Pueden dejar sus comentarios o alguna duda que tengan. Que pasen un buen fin de semana.

5 opinaron:

neko :3 youtubera
Este comentario ha sido eliminado por el autor.
Responder
neko :3 youtubera

:)

Responder
neko :3 youtubera

una pregunta como puedo poner una caja de html :D

Responder
Deysi osorio cruz

:)

Responder
Texture Dreams

hola segui tu tutorial pero no me sale los emoticones lo que paso es que mi logo en los comentarios no salen :((
ahora no se como arreglarlo

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