14/10/13

Cómo hacer que salgan emoticonos en los comentarios de Blogger

¡¡Toca post invitado!!

De la mano de Mónica, la misma que amablemente os explicó cómo poner el botón de subir con efecto deslizante o scroll, hoy vamos a ver cómo hacer para que la gente pueda comentar en vuestros blogs con emoticonos:


Es decir, que cuando alguien deje un comentario le salga realmente el dibujito :)

Mola, ¿no?

¡Gracias Moni!

Nota: Este es un post invitado. No está escrito por mí, pero me ha parecido interesante compartirlo en Personalización de Blogs.

POST INVITADO

¡Hola! ¿Qué tal? Soy Mónica, la escritora del blog Cortar, Coser y Crear.

Lo primero es lo primero: ¿Qué tal lleváis el mes de octubre? Imagino que ya habéis dejado en el olvido las vacaciones de verano, y estáis pensando en cómo celebrar Halloween. Yo sin embargo, aún me estoy adaptando a la rutina, puesto que mis vacaciones fueron tardías. Estuve todo el mes de septiembre en España, y al volver a Berlín me encontré de repente con 20 grados menos. En fin, sin comentarios.

Hoy colaboro de nuevo en Personalización de Blogs (¡gracias Blanca!). ¿Os acordáis del botón "subir arriba con efecto deslizante" que os enseñé la última vez? (qué nombre tan chulo para una cosa tan simple :-P) pues hoy cambio de tema totalmente. Esta vez os explicaré cómo poner emoticonos (o smileys) en los comentarios de vuestros blogs de Blogger.

    
Debo decir que me costó bastante conseguir que funcionase todo bien. Si buscáis cómo hacerlo por internet veréis que la información es bastante confusa y depende de archivos de terceros. Creedme, un lío. Así que pensé que sería buena idea contaros cómo hacerlo de una forma sencilla y rápida, y eso es lo que he hecho.

Si queréis ver lo que vais a conseguir como resultado, no tenéis más que ir a mi blog y hacer como que comentáis. Veréis que hay un cuadrito en el que se ven los iconos que podéis usar. Y si además, ya puestos, comentáis algo, podéis probar a poner cualquiera de las combinaciones de teclas que salen en el cuadrito, e ilustrar vuestro comentario con los smileys. ¿No os gustaría que vuestros lectores también pudieran usarlos? Pues seguid leyendo si queréis dar esa opción en vuestro blog :)

Paso 1. Copia de seguridad


En primer lugar, como siempre, antes de empezar a tocar el código de la plantilla de Blogger lo más conveniente es realizar una copia de seguridad.

Paso 2. Modificar la hoja de estilo


Ahora empezamos ya a trastear con el código de la plantilla html. Ya sabéis donde encontrarlo: vais a Plantilla y pincháis en Editar html.

Dentro de la plantilla, tenemos que ir al código CSS (hoja de estilo) e introducir el siguiente código justo encima de ]]></b:skin>.

Así que, podemos usar el buscador para encontrar ]]></b:skin> y pegar encima el código:

/* Emoticonos en comentarios
----------------------------------------------- */
img.bhacksmly {
height: auto !important;
vertical-align: middle !important;
width: auto !important;
border:0px !important;
}


Así:


Con esto definimos la clase que usaremos para enseñar a nuestros visitantes los iconos que podemos usar en los comentarios del blog.

Paso 3. Insertar código java


En este tercer paso 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 cara feliz. Eso lo haremos usando un código java.

Los iconos que he usado son los smileys animados de yahoo messenger. Aquí los podéis ver todos, aunque yo he puesto en el código java solo los que me han gustado. El archivo que usaremos lo he subido a mi cuenta pública de dropbox, por tanto para usarlo en la plantilla de html tenemos que introducir justo encima de </body> el código siguiente:

<script src="https://dl.dropboxusercontent.com/u/52353526/yahoo-smileys-reduc.js" type="text/javascript">

Así:


El código tiene los iconos y la combinación de teclas para usarlos que a mí me gustaban más, pero si queréis modificarlo tan solo os tenéis que bajar el archivo, cambiar lo que os parezca y subirlo a vuestro propio servidor.

Paso 4. Insertar cuadro con iconos disponibles


En este punto, los iconos ya deberían funcionar en los comentarios. Pero, claro, tenemos que mostrarle a nuestros comentaristas qué iconos pueden usar y cómo pueden hacerlo. Esto lo haremos poniendo un cuadro justo encima de los comentarios mostrando nuestros iconos y la combinación de teclas.

El código que usaremos va entre <div class='post-footer-line post-footer-line-3'> y </b:includable>.

Lo más fácil es usar el buscador para encontrar la sección <div class='post-footer-line post-footer-line-3'> y luego buscar por debajo el código </b:includable>, para poner justo encima nuestro código personalizado:

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

Así:


¡Ya lo tenemos! Ahora podemos usar, tanto nosotros como nuestros seguidores, iconos en los comentarios del blog.

Si nos os gustan los colores o la forma del cuadro, podéis cambiar los parámetros de width, border y background a vuestro gusto. En concreto, con width cambiamos el ancho, con border el color del borde y con background el color del fondo del cuadro.

 ¿Qué os ha parecido? ¿a que es muy fácil y el resultado es molón? ¡Ale, pues todos a poner smileys en los comentarios! Hasta la próxima y muchos besotes, 

Mónica


Mónica, ¡mil millones de gracias otra vez por compartir esto con nosotros!

No tengo ninguna duda de que a todo el mundo le habrá chiflado la idea... :)

Mil besos,

P.D. Si no lo habéis hecho ya, aún podéis echarme un cable votándome para los premios Bitácoras 2013. ¡Creo que no tengo que explicaros lo que significaría para mi poder entrar en la clasificación!


Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

20 comentarios

  1. Una muy buena idea para darle un toque diferente a los comentarios! Aunque yo lo veo más para foros también puede encajar en los blogs!! Un genial post, gracias Mónica!! :D

    Nuestro blog: Con la realidad en los talones

    un besazo de lunes! :D

    ResponderEliminar
  2. Hola,
    En mi código html no encuentro ni ]]> ni ninguno de los otros códigos. ¿Igual es que mi plantilla está muy modificada, ya?

    ResponderEliminar
  3. No se qué ha pasado que el post no ha salido en el "escritorio de blogger", pero ahora ya sale! BIENNNNN!! no os perdáis este post que mola mucho!! :D

    ResponderEliminar
  4. Muy buena idea y es tan complicado que es estupendo que alguien lo explique tan bien!! Besos.

    ResponderEliminar
  5. ¡Muchas gracias Mónica! Me voy a ver tu blog, a ver cómo quedan.

    Y a ti Blanca, por este post invitado.

    Un beso

    ResponderEliminar
  6. Me encanta tu blog, es super cute y muy util en ciertas cosas.

    http://noirsouvenier.blogspot.mx/

    ResponderEliminar
  7. Qué bien el poder poner caritas a nuestros comentarios aunque en esta ocasión lo veo muy lioso para mi, es que soy muy torpe y no me fío de misma. Quizás más adelante cuando gane seguridad lo intente. Pero es una idea genial el traerlo para bloggers valientes jeje.
    Besos!

    ResponderEliminar
  8. Q guay este post ! yo no se si lo intentaré pero me parece super buena idea mucho más personalizado :D

    un beso a las dos

    www.yoyomismaeirene.com

    ResponderEliminar
  9. Muchas gracias por la entrada muy interesante.

    Tengo una preguntita...
    Hay alguna forma de recibir por correo la contestación a los comentarios en otros blog? Porque con el botón "avisarme" te suscribes a todos los comentarios que hagan en esa entrada. ¿Se puede sólo recibir la respuesta al tuyo?

    Muchas gracias! besoss

    ResponderEliminar
  10. ¿Cómo puedo crear mi propia carpeta de íconos en .js? Muchas gracias:)

    ResponderEliminar
    Respuestas
    1. Blanca, ya resolví el problema igualmente ¡gracias!
      Pero, aparte de ello, me parece que ocurre un problema al limpiar el historial del navegador y volver a entrar al los smileys ya no se miran :(

      Eliminar
  11. Genial! Muchas gracias!! Pero una pregunta, el cuadro con los emoticonos me sale antes de todos los comentarios, no podría ponerlo en el cajón donde se escriben los comentarios?

    ResponderEliminar
  12. Hola que tal un cordial saludo, espero puedas ayudarme no logro encontrar div class='post-footer-line post-footer-line-3' en mi blog espeor puedas ayudarme de ante mano gracias http://adictos-alared.blogspot.mx/2016/02/descargar-guia-de-mantenimiento-para.html?showComment=1455931048986#c4438756588643900727

    ResponderEliminar
  13. ¿Está cansado de su sufrimiento financiero o necesita fondos para iniciar un negocio, pagar cuentas o dinero para vivir una vida mejor y no puede obtener ayuda. Trate de obtener su tarjeta de cajero automático hoy y hacer esta oportunidad suya. Esta tarjeta puede retirar hasta $ 3,000 por día y está programado de tal manera que no puede ser rastreado y también tiene una técnica que hace imposible que la cámara de CCTV le detecte al usarlo. Tengo que saber acerca de esta tarjeta de cajero automático en blanco cuando estaba buscando trabajo en línea hace un mes y realmente me ha ayudado con mi situación financiera y quiero que todos se beneficien de esto también. Para obtener más información sobre cómo obtener el suyo, póngase en contacto con speedhackersnetwork001@gmail.com

    ResponderEliminar
  14. Are you tired of your financial suffering or do you need funds to start up some business, pay up bills or money to live a better life and you can't get help. Try and get your ATM blank card today and make this opportunity yours. This card can withdraw up to $3,000 per day and it is programmed in such a way that it cannot be tracked and also has a technique that makes it impossible for the CCTV camera to detect you when using it. I have to know about this blank ATM card when I was looking for work online about a month ago and it has really help me out with my financial status and I want everyone to benefit from this also. For details on how to get yours today contact speedhackersnetwork001@gmail.com

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.