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

kanikase Seguir

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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
 

Foroweb

SEO
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Sep 2013
Mensajes
188
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:
 

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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 :confused:

---------- 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:
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
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 :confused:

---------- 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
 

Foroweb

SEO
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Sep 2013
Mensajes
188
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 :confused:

---------- 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:
 

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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>
 

Jxit3

Zeta
Programador
Verificación en dos pasos activada
¡Ha verificado su Paypal!
Desde
25 Sep 2012
Mensajes
1.527
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:

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
-.- al menos lees lo que puse... te puse que uses los SPAN... -.-' :fatigue:

Captura.PNG
 
Arriba