đŸ’»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