Tutorial: Emoticonos en los comentarios

Hola! ¿Qué tal, como andan? Espero que muy bien, hoy traigo un tutorial:
Emoticones en los comentarios
Ahora traigo un pedido hecho por Kramer DeKretos, para personalizar los comentarios. El día de hoy les traigo el tutorial de los emoticones, luego haré el tutorial de el personalizado de los comentarios, la fecha, cantidad de comentarios, avatar, texto, fondo, ETC. 

¡Empecemos!


Paso 1
Primero vamos a
Plantilla >> Editar HTML >> CTRL+F y buscamos
]]></b:skin>
Y arriba pegamos
/* Emoticonos en comentarios
----------------------------------------------- */
img.bhacksmly {
height: auto !important;
vertical-align: middle !important;
width: auto !important;
border:0px !important;
}
Quedando algo así:
 
Click para verla más grande
Paso 2

Ahora haremos que le diremos a Blogger lo que tiene que hacer cuando algún seguidor use un emoticono al escribir un comentario. Es decir, que si pone :P salga un icono sacando la lengua, o que si pone :) ponga una icono con una carita feliz.

Los iconos que yo usé son los smileys animados de yahoo messenger. Aquí los pueden ver todos, aunque yo puse en el código java solo los que me han gustado. El archivo que usaremos lo he subido una cuenta pública de dropbox. Ustedes pueden usar el que yo utilizé :3
Ahora debemos:
Introducir justo encima de </body> siguiente código:
<script src="https://dl.dropboxusercontent.com/u/52353526/yahoo-smileys-reduc.js" type="text/javascript"></script>
Para que te quede así: 
Click para verla más grande
El código tiene los iconos y la combinación de teclas para usarlos que a mí me gustaban más, pero si quieren modificarlo tan solo tienen que bajar el archivo, cambiar los iconos que quiean y subirlo a su propio servidor.

Paso 3: Insertar el cuadro con emoticones disponibles

El código que usaremos va entre <div class='post-footer-line post-footer-line-3'> y </b:includable>
Más fácil, CTRL+F y busca para encontrar <div class='post-footer-line post-footer-line-3'> y después buscas por debajo el código </b:includable> para colocar justo encima este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='pcgblogysmile' id='ysmile' style='width:600px; text-align:center; border:2px solid #000000; background: #ebebeb; padding:10px; color:#000000; font-weight:normal;'>
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)    
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :/
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :*
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :O
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :S         
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :w
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :a
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((    
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:)
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)         
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P              
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(    
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|    
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)    
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:P
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =DD
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :q
     <img class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^_^
     <img class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate.gif'/> :ar!
    </div>
</b:if>
Quedando así:
Click para verla más grande
width: Ancho
border: el color del fondo del cuadro
background: el color del borde

¡Y listo! Ya lo tenemos, ahora podemos usar, tanto nosotros como los demás, los emoticonos en los comentarios!

14 comentarios:

  1. Gracias por responder mi duda espero utilizarlo y darte el credito que te toca gracias :3

    ResponderEliminar
  2. un tuto muy facil y muy practico gracias y me llevare el premio :3

    ResponderEliminar
  3. gracias por el tuto!! *0* estba buscando este tuto por todas partes, gracias por compartirlo!! :D y enhorabuena por el premio!! ^^
    saluditos! ^^

    ResponderEliminar
  4. Amary no se lo puede dar a todos tus nominados solo elige 10 porfi.

    ResponderEliminar
  5. Kyaa muy chuli el tutorial y felicidades por el premio!

    ResponderEliminar
  6. Muy lindo el tutorial! *w* veamos si le hago, y suerte con el sorteo ^^
    PD: Felicidades por el premio (o^o)

    ResponderEliminar
  7. Hola Amary !
    Feliz Año Nuevo! ^0^
    Vine a avisarte que cambie la url de mi blog miras y limones y por lo tanto también del botoncito de afiliación. Me gustaría que lo cambiara n.n url del blog: bigdreamsfromalittlemonster.blogspot.com.es

    ResponderEliminar
  8. hola!! feliz Año Nuevo! Buen tutorial! Por cierto tienes un premio en mi blog!http://miloveshojo.blogspot.com/ Pasate!! bye!

    ResponderEliminar
  9. Te nominé a un premio en mi bloggi <3 http://kawaiilovelaura.blogspot.com.es/

    ResponderEliminar

¡Gracias por tu comentario!

Emojis:
⸜(。˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (>▽<) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ノ◕ヮ◕)ノ*:・゚✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
♡♥♫△☆ღ