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

25 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
  12. hola, siento molestias, he intentado hacerlo, y no hay manera. cuando pone eso de buscar y remplazar,no lo encuentro. podrias aconsejarme? gracias. y fantastico blog

    ResponderEliminar

¡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