Gracias por visitar mi blog! Espero que lo disfrutes! UnatierraParaChicas...

sábado, 28 de diciembre de 2013

ge

Hola! :3 ¿Que tal, como andan? Espero que muy bien, hoy traigo un tutorial, un avisito y un premiesito otorgado por Larita, ¡gracias! Lo pondré dentro de este botón para que no sea tan larga la entradita :3
Y aviso que estoy dentro del concurso de Kumy

Click en el banner para entrar, ¡te puedes ganar una de sus plantillas!

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. 
¡Empezemos!

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!
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)