Cómo poner emoticones de Facebook en los comentarios de Blogger

  • Autor Autor kanikase
  • Fecha de inicio Fecha de inicio
kanikase

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Necesito que alguien me ayude con un codigo, loque hice fue modificar un codigo que vi en un tutorial para poner emoticones en los comentarios de blogger, pero no me gustaban las caritas asi que decidi cambiarlas por las de facebook, bueno irè al punto, el problema es que cuando hago un comentario con el texto, y enseguida el emoticon, hace un salto de linea y el emoticon sale abajo, y lo que quiero es que salga donde pongan el codigo de emoticon, esto es lo que estoy utilizando:

HTML:
HTML:
<script src='http://imges.tk/emoticones.js' type='text/javascript'/>
      <script type='text/javascript'>
        emoticonComentario();
        </script>

CSS:
HTML:
<style>
.emoticon {background-image:url(http://imges.tk/emoticones.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:15px;width:15px;
}
.feliz {background-position: 0 0;}
.triste {background-position: -237px 0;}
.guino {background-position: -16px -1px;}
.lengua {background-position: -32px 0;}
.feliz2 {background-position: -49px 0;}
.raro {background-position: -65px 0;}
.asombro {background-position: -82px 0;}
.confundido {background-position: -98px 0;}
.llorando {background-position: -116px 0;} 
.enojado {background-position: -134px 0;}
.beso {background-position: -151px 0;}
.lentes {background-position: -167px 0;}
.angel {background-position: -184px 1px;} 
.diablo {background-position: -202px 1px;}
.feliz3 {background-position: -219px 1px;}
</style>

El ejemplo de como se ven los comentarios lo pueden ver aqui: Juegos LoJuegas: Emoticones
 
Necesito que alguien me ayude con un codigo, loque hice fue modificar un codigo que vi en un tutorial para poner emoticones en los comentarios de blogger, pero no me gustaban las caritas asi que decidi cambiarlas por las de facebook, bueno irè al punto, el problema es que cuando hago un comentario con el texto, y enseguida el emoticon, hace un salto de linea y el emoticon sale abajo, y lo que quiero es que salga donde pongan el codigo de emoticon, esto es lo que estoy utilizando:

HTML:
HTML:
<script src='http://imges.tk/emoticones.js' type='text/javascript'/>
      <script type='text/javascript'>
        emoticonComentario();
        </script>

CSS:
HTML:
<style>
.emoticon {background-image:url(http://imges.tk/emoticones.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:15px;width:15px;
}
.feliz {background-position: 0 0;}
.triste {background-position: -237px 0;}
.guino {background-position: -16px -1px;}
.lengua {background-position: -32px 0;}
.feliz2 {background-position: -49px 0;}
.raro {background-position: -65px 0;}
.asombro {background-position: -82px 0;}
.confundido {background-position: -98px 0;}
.llorando {background-position: -116px 0;} 
.enojado {background-position: -134px 0;}
.beso {background-position: -151px 0;}
.lentes {background-position: -167px 0;}
.angel {background-position: -184px 1px;} 
.diablo {background-position: -202px 1px;}
.feliz3 {background-position: -219px 1px;}
</style>

El ejemplo de como se ven los comentarios lo pueden ver aqui: Juegos LoJuegas: Emoticones
Es muy básico el código aunque sinceramente se me había escapado esto, no se como se puede sacar la posición exacta del emotico dentro de la imagen pero creo que con Photoshop lo haces perfecto es lo único que tienes que sacar y el radio de la imagen en este caso 1px por que es el tamaño del emotico un saludo ! :encouragement:
 
Es muy básico el código aunque sinceramente se me había escapado esto, no se como se puede sacar la posición exacta del emotico dentro de la imagen pero creo que con Photoshop lo haces perfecto es lo único que tienes que sacar y el radio de la imagen en este caso 1px por que es el tamaño del emotico un saludo ! :encouragement:

Las posiciones si las tengo, las saque desde aqui: Sprite Cow - Generate CSS for sprite sheets el problema que tengo es que al poner los emoticones salen con saltos de linea 😕

---------- Post agregado el 16-mar-2014 hora: 05:51 ----------

es por el JS http://imges.tk/emoticones.js como ves usa <li><span....></span></li>... tienes que sacar los <li> y </li> para que funcione bien sin irse abajo.

Esos ya los saque, y sigue igual :ambivalence:
 
Las posiciones si las tengo, las saque desde aqui: Sprite Cow - Generate CSS for sprite sheets el problema que tengo es que al poner los emoticones salen con saltos de linea 😕

---------- Post agregado el 16-mar-2014 hora: 05:51 ----------



Esos ya los saque, y sigue igual :ambivalence:

jje usas div es lo mismo -.-'... y aparte no los cierras como se debe...
<div class="emoticon triste"/>

usa span... y los div se cierran siempre... los unicos que no se cierran son el tag img y otro que no recuerdo
 
jje usas div es lo mismo -.-'... y aparte no los cierras como se debe...
<div class="emoticon triste"/>

usa span... y los div se cierran siempre... los unicos que no se cierran son el tag img y otro que no recuerdo

Las posiciones si las tengo, las saque desde aqui: Sprite Cow - Generate CSS for sprite sheets el problema que tengo es que al poner los emoticones salen con saltos de linea 😕

---------- Post agregado el 16-mar-2014 hora: 05:51 ----------



Esos ya los saque, y sigue igual :ambivalence:
Lo último que menciono Cicklow, usa Span para separar :top:
 
jje usas div es lo mismo -.-'... y aparte no los cierras como se debe...
<div class="emoticon triste"/>

usa span... y los div se cierran siempre... los unicos que no se cierran son el tag img y otro que no recuerdo

Entonces que uso, tu eres el que sabes, yo estoy aprendiendo
 
jje usas div es lo mismo -.-'... y aparte no los cierras como se debe...
<div class="emoticon triste"/>

usa span... y los div se cierran siempre... los unicos que no se cierran son el tag img y otro que no recuerdo

Entonces uso: <span class="emoticon triste"></span>
 
estas usando los emoticones dentro de divs y estos están usando display: inlineblock, usa<span> o <p> para que no se salte.
 
Última edición:
-.- al menos lees lo que puse... te puse que uses los SPAN... -.-' :fatigue:

Captura.PNG
 

Temas similares

Atrás
Arriba