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!