Emoticones en Blogger actualizado




Anteriormente les había mostrado en una entrada como añadir los emoticones o caritas en los comentarios de blogger ya que muchos les gusta como una forma de expresarse.

En esta entrada voy a explicar como instalar emoticones en el área de comentarios de sus plantillas de blogger con un mejor funcionamiento.


Nota → Hacer copia de seguridad antes de realizar los cambios


Pasos para poner emoticones en el blog de Blogger




Ir a Diseño ► Edición HTML ► Presionar Ctrl + F → en el buscador pegar

</body>

Antes / Sobre esta etiqueta pegar lo siguiente:

<!-- Emoticons en comentarios de Blogger actualizado -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.emoWrap {
  background-color:#fff;
  border:2px solid #0a62a2;
  border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.emoKey {
  display:inline-block; /* Importante! */
  *display:inline;
  vertical-align:middle;
}
input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Hacer Click para ver el código!",
emoMessage:"Para insertar emoticon debe agregar al menos un espacio antes del código."
})
});
//]]>
</script>
<script src='https://sites.google.com/site/ccbscript/home/EmoticonsCCB.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
</b:if>



► Solo resta modificar el script de los comentarios de Blogger, donde se debe reemplazar:


document.getElementById(domId).insertBefore(replybox,null);


Por la siguiente línea:


document.getElementById(domId).insertBefore(replybox.parentNode, null);

Con esto la lista de emoticones siempre aparecerá encima del formulario de los comentarios de Blogger.


Nota:
Debido a que esta implementación utiliza jQuery entonces al menos debes tener la biblioteca jQuery [línea-36]. Si la biblioteca jQuery ya existe en tu plantilla el código en línea-36
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> no debe ser copiada.


Datos
opción / información
emoRange / El lugar donde la imagen parece emoticones.
putEmoAbove / El lugar donde se va a poner la imagen de las muestras de emoticones.
TopText / Negrita / negrita a continuación emoticon muestra la imagen
emoMessage / Reserva en el cuadro de advertencia / alarma y el texto en negrita.


Si te gusta la entrada compártela.

¡Gracias!

2 comentarios:

  1. Una consulta... He aplicado el código, pero a mí, como administradora no me permite insertar los emoticonos en los comentarios, y en cambio a mis visitantes sí. ¿Sabes a qué se puede deber? Un saludo.

    ResponderEliminar
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top