ūüíĽTutoblog para ti #18: Emoticones para los comentarios del blog.

domingo, 31 de julio de 2016

¡Holaa lectores! En el tutorial de hoy les ense√Īar√© a colocar emoticones o emoji en los comentarios de sus blogs. La idea de este tutorial me la dio Un viaje por los libros a quien se lo agradezco de todo coraz√≥n  ❤️‍
Espero que les guste el tutorial y les resulte de utilidad...


 Paso 1:
Primero deben dirigirse a PlantillaEditar HTMLaprietan Ctrol+Fbuscan </head>
Antes de </head> pegan el siguiente código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://lh5.googleusercontent.com/-20cNHpka-fA/TikBlTXm_KI/AAAAAAAABkE/1orU58ycSu8/fb_sonrisa.gif" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://lh6.googleusercontent.com/-Ngrhi8wn99E/TikBlrW-FvI/AAAAAAAABkI/P8RTNKLS51Y/fb_triste.gif" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://lh6.googleusercontent.com/-kkd84kPmUTw/TikBkw_9z2I/AAAAAAAABj0/WV9RQds939U/fb_guino.gif" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://lh4.googleusercontent.com/-P9hko0sZZVY/TikBk4BH0xI/AAAAAAAABj4/o5aVYyp1wgU/fb_lengua.gif" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://lh4.googleusercontent.com/-P9hko0sZZVY/TikBk4BH0xI/AAAAAAAABj4/o5aVYyp1wgU/fb_lengua.gif" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://lh5.googleusercontent.com/-r4q9ruMcMzM/TikBkhvFEgI/AAAAAAAABjw/r3VC-agWwu8/fb_feliz.png" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://lh5.googleusercontent.com/-r4q9ruMcMzM/TikBkhvFEgI/AAAAAAAABjw/r3VC-agWwu8/fb_feliz.png" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://lh5.googleusercontent.com/-c_OC_4PKFA8/TikBl3rowvI/AAAAAAAABkM/gJQ-HpMUnQk/fb_XD.gif" />');

// :S 
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://lh6.googleusercontent.com/-AVOvM9rn4J8/TikBkhVSwLI/AAAAAAAABjo/nJSmAIyp_2k/fb_duh.gif" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://lh6.googleusercontent.com/-AVOvM9rn4J8/TikBkhVSwLI/AAAAAAAABjo/nJSmAIyp_2k/fb_duh.gif" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://lh5.googleusercontent.com/-4UuPzxsrXK4/TikBlXlKttI/AAAAAAAABkQ/q80e-j7wW88/fb_molesto.gif" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://lh5.googleusercontent.com/-XN7rGa_1A2k/TikBlPKbVoI/AAAAAAAABj8/Xf3enr9F1Go/fb_llorando.gif" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://lh3.googleusercontent.com/-DX-1dhWNd3c/TikBk3WWMTI/AAAAAAAABkA/SVdLGSpluJ0/fb_gafas-sol.gif" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://lh3.googleusercontent.com/-QvPqYhMjpRA/TikBkFKJQ3I/AAAAAAAABjk/UpLTAo4iB8w/fb_asombrado.gif" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://lh3.googleusercontent.com/-QvPqYhMjpRA/TikBkFKJQ3I/AAAAAAAABjk/UpLTAo4iB8w/fb_asombrado.gif" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://lh5.googleusercontent.com/-nSRdDIsdgvo/TikBkMR3LNI/AAAAAAAABjc/6TgLJFw8dVE/fb_beso.gif" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://lh4.googleusercontent.com/-_tmsynPKz0Y/TikBkHEK7hI/AAAAAAAABjs/9ovP65vuRbw/fb_angel.gif" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://lh4.googleusercontent.com/-_tmsynPKz0Y/TikBkHEK7hI/AAAAAAAABjs/9ovP65vuRbw/fb_angel.gif" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://lh3.googleusercontent.com/-IYQvsMUfT_M/TikBkT9sDCI/AAAAAAAABjg/q9fQtjh9ZOY/fb_diablo.gif" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>
 Paso 2:
Ahora deben buscar esto:
<p>
<data:comment.body/>
</p>

Y lo reemplazan por el siguiente código:
<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>

 Paso 3:
Luego buscan esto:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Si les aparece dos veces, justo debajo de la segunda, deben agregar éste código:
<img border='0' src='https://lh5.googleusercontent.com/-UQcOiZ_Q2oc/TikBe74M1jI/AAAAAAAABjY/t-zm-AQjY1w/emoticons.png'/>
Y listo s√≥lo hacen clic en Guardar plantilla y los emoji estar√°n listos para ser utilizados 


Cualquier duda con el c√≥digo o con su colocaci√≥n, no duden en comentar o env√≠enme un mensaje a cariavial280371@gmail.com


Hasta aquí llegó el tutorial de hoy, espero que haya resultado de su utilidad.

Como ya me estoy quedando un poco corta con las ideas en relación con los tutoriales, les pido su ayuda. Comenten los tutoriales que les gustaría que publique, sus dudas respecto a los códigos de blogger o cualquier inquietud.
Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.
¡Un abrazo literario!

24 comentarios:

  1. muchas gracias! aunque esto de las plantillas no lo entiendo mucho xd
    Besos <3

    ResponderEliminar
    Respuestas
    1. De nada! Espero poder ayudarte con cualquier duda que te surja ^-^
      Besos ❤️‍

      Eliminar
  2. ¡Hola! gracias por el tutorial, los he utilizado pila :)
    tengo una duda, justo tenemos la misma plantilla ¿c√≥mo hiciste para editar el men√ļ de abajo de la cabecera? a mi no me aparece para editarlo :(
    perdona la joda, y muchas gracias por los tutos <3

    ResponderEliminar
    Respuestas
    1. ¡Hola Ann! Me alegra que los hayas utilizado :)
      Ahora me comunico con vos y te explico cómo editarlo ^-^
      Besitos ❤️‍

      Eliminar
  3. Hola linda! ya he ocupado varios códigos viendo tutoriales, pero siempre me da miedo equivocarme y borrar algo importante xDD jajaj no sé si arriesgarme con este.
    De todas maneras muchas gracias por el tutoblog, me encantan!
    Cari√Īos n.n

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! a mi al principio tambi√©n me daba miedo los c√≥digo, por eso es bueno tener un blog de pruebe en el que siempre apliquemos primero los cambios all√≠ y luego en nuestro blog 'oficial' ^-^
      Gracias por pasarte y comentar!
      Besotes ❤️‍

      Eliminar
  4. Hola Anto *-* que genial tuto :3 yo he aprendido algo de los c√≥digos por internet y me alegro que hagas estos tutos, as√≠ ayudas a personitas que quiz√°s tengan dudas o quieren implementar algunas cosillas en su blog. Yo te propongo que el pr√≥ximo sea sobre el top comentaristas e.e que te parece? Y nada, un besito guapa √Ī.√Ī

    ResponderEliminar
    Respuestas
    1. Hola Kara, me alegra poder ayudar!
      Me encanta tu sugerencia para un tutorial *-*
      Un besote ❤️‍

      Eliminar
  5. ¡Hola! Soy literalmente un desastre editando c√≥digos html. Tanto que aunque encontr√© muchas plantillas y cosas para el blog que me parecen bell√≠simas, nunca las cambio porque lo toqu√© tanto que me da p√°nico hacer un l√≠o jaja. A√ļn as√≠ gracias por compartir el truco, se deben ver muy lindos los emojis en los comentarios.
    Pd. Te sigo :)
    Besitos!

    ResponderEliminar
    Respuestas
    1. ¡Hola! entiendo completamente tu miedo jaja a mi me sucedi√≥ XD
      Muchas gracias por pasarte, comentar y seguirme ^-^
      Saludos!

      Eliminar
  6. Este tengo que ponerlo en pr√°ctica ^-^

    ¡SE MUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIZ ūüėäūüėäūüíĖ!

    ResponderEliminar
    Respuestas
    1. Espero que te quede genial!
      Besitos ❤️‍

      Eliminar
  7. ¡Hola!
    Pues fíjate que esto es algo que no sabía, me va a venir bien :D
    Un besito <3

    ResponderEliminar
    Respuestas
    1. ¡hola! me alegra que te sirva ^-`
      Un abrazo :)

      Eliminar
  8. Qué interesante! Muchas gracias! Un besin

    ResponderEliminar
    Respuestas
    1. ¡Muchas agracias a ti por pasarte y comentar!
      Saludos ❤️‍

      Eliminar
  9. que curioso lo de los emont jajajajaja a ver si me animo y lo a√Īado que seguro se ve muy chulo.
    Un saludo

    ResponderEliminar
  10. ¡Hola! Muchas gracias por el tutorial, me tendr√≠a que empezar a poner al d√≠a con la edici√≥n en el blog, siempre me da un poco de pereza, ¡es complicado! xD ¡Gracias por la entrada!
    Un abrazo ^^

    ResponderEliminar
    Respuestas
    1. ¡Holaa! Gracias por pasarte y comentar :)
      Cualquier duda, no dudes en consultarme!
      Saludos!

      Eliminar
  11. Hola!
    Super tip para los que amamos poner emojis en todos lados casi jajaja. me han servido un buen tus tutoriales.
    Saludos y un abrazo.

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me pone muy feliz que mis tutoriales hayan sido de utilidad jaja
      Un beso enooorme ❤️‍

      Eliminar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opini√≥n es muy importante para m√≠♥

Santa Template by Mery's Notebook © 2014