💻Tutoblog para ti #18: Emoticones para los comentarios del blog.

¡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 Plantilla→Editar HTML→aprietan Ctrol+F→buscan </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAuswdSLki8YymsQuqBKlnZmD2ek4KzTWufJAC7lvRbfAYBT9uytS02Tjt7JjiYQK2DbTO_f5O50grOJK2ELm23SUNApInok63bd5sk43XjS7AG7Nu5nOga-BPOCZg5vi_47i1DWLtlI/" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRW4XUHjtOG7vQNrxS7d3zo7ZeeIWMeOqqKI6iCZFPPKOOXx-B_TXO9F64KfcJqOR2_GlijfT6FT8DNlU-Q2bCKEtXNBXHqAopePCRB86dUy181eE-MQekL_ADPt1gG-S8vun5mWcqZ8/" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9aOQc2znfQD6Ivb6YYFNE-5DORkTk8T8HOMhHCdJWDIAM16QFMG3eMoz40qZh2NmbOLD1JzZNlHYylk6DTddwOfwVHyPeVdmBRh05hna7RXGDYJe3riyycG00Hw490Ol5gEditBmzl0/" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZPenYzYrt_hQPq7M8ILeNlPEOSgmc08hRKdw-5zkHtumAnBSQA2bxRqHKUqmhpyTz00lYgpmsVMvY20MAQnErrWIx0gjinw01XBIi_ol-Jh4VghWOHWwQrnUQhOtXADg4e4g0WH8X_o/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZPenYzYrt_hQPq7M8ILeNlPEOSgmc08hRKdw-5zkHtumAnBSQA2bxRqHKUqmhpyTz00lYgpmsVMvY20MAQnErrWIx0gjinw01XBIi_ol-Jh4VghWOHWwQrnUQhOtXADg4e4g0WH8X_o/" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o-HDT4Yu47pQ1vOJ_BwLCAQhrrg-ctSCNKNyJU1mdStEAXarKKxwXYpNaUBg1Gq9qLXgqAnM_qM2VG1IIQ2v00II_xVdCz7egXRQCNYVihTmVaG2Nd5SHw5TMRpIaoD8FJc91H6tPpc/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o-HDT4Yu47pQ1vOJ_BwLCAQhrrg-ctSCNKNyJU1mdStEAXarKKxwXYpNaUBg1Gq9qLXgqAnM_qM2VG1IIQ2v00II_xVdCz7egXRQCNYVihTmVaG2Nd5SHw5TMRpIaoD8FJc91H6tPpc/" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHiYUCo5M7fS-pTjHsnmpv55-HtBl6p0v8gKvvln9iaD9wnA2SenzTDYg4oKRb-6d1QeO_1vzYtjxW5MCvKRz41LXwkdpmvHBCAow72Y_rR__c1tG8AG5KswGZnVVzYqq4gQP0PD1NoE/" />');

// :S 
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHua0uWLM-AenLFyZ9IW-YpYJGLPy8s_GWSpB5QtbZ2mj7FDTY4LL0G8BjGxKzSHeK_jkbxT81i1FI9rLhxdxR0upShvgsu7crh9xYDiPiHiQa8JTmHKLfNEIYanfc_m1y3Ee0TQU1-Nk/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHua0uWLM-AenLFyZ9IW-YpYJGLPy8s_GWSpB5QtbZ2mj7FDTY4LL0G8BjGxKzSHeK_jkbxT81i1FI9rLhxdxR0upShvgsu7crh9xYDiPiHiQa8JTmHKLfNEIYanfc_m1y3Ee0TQU1-Nk/" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5zpPjwoTC8Qe3sNwFLJSqEHZk7BlquWs_h6JdBm__4pei013IQLBx1sn5eQxka_E4KyYBHrGpl9bUVgGvRaVguU3p18KtVmctGEYb5yTJWF1EIYD2qgjhAY86bG_FLbdaMbWFgaUZLQ/" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJED1jw5GJZn09IgU9TratBpI8Df4AEmZLHspLsD6Lz0R8JUeSQG65iE-qpfmwvO6bPdZ9z2V7aoQcpWuTC2KXQmjbe6HjDk69Z-cviARjU4JApnvC1qEedJIIBEx2O-VBV4rLve-dAw/" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMs3qzQTC12GRa9M838UkvkIZhTjnRs9GDvnTUwlr8647MBB-QVvTagM5E4NVC4HZbSn48lGIl-Yd_WGpMuupS63CmwEW7pMSeh-JgTKkCQ9OqFdiJcHMrl7nJw7TN1EJVkX7Qx5p1RLU/" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKp9hxGM6pvP1cUC4xy2So3vqQamnYN27yJjYVacKCK1f4DpLMHr7QFvF9pc7hks4AIuG4x3iPf6fnwWsOmEjQ-ZawVC9zN4lLeb23vQWv6kbhGD9ZuLFl-2aYctZYJR3tZZrsFGswJ8g/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKp9hxGM6pvP1cUC4xy2So3vqQamnYN27yJjYVacKCK1f4DpLMHr7QFvF9pc7hks4AIuG4x3iPf6fnwWsOmEjQ-ZawVC9zN4lLeb23vQWv6kbhGD9ZuLFl-2aYctZYJR3tZZrsFGswJ8g/" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC2BSBk23BH82t0jSq520u9gBsyiwSaeVYqITzLaMCl72ANkVaBjbL5kG5z-PWFsQpIiSdCu19kftXTKqzMgK7Ec0jTM0BejYz72z5hPx2yS9m2kfv2MUAdWqfh0OV900MN1sb_U0Dp5c/" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhkQ50qHSzcfQarOnfX6fekQMSu0lhVr61jbMc4x8GtGIJErRU4_sBZHMcHNnL5sIh6LuaVoMSy-lLbalyclZhQtiVnaIDd3Q6W5f4XYCaAd9BvUmFQJgKmkSNHOGwKiz5pAYMsMb3e0/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhkQ50qHSzcfQarOnfX6fekQMSu0lhVr61jbMc4x8GtGIJErRU4_sBZHMcHNnL5sIh6LuaVoMSy-lLbalyclZhQtiVnaIDd3Q6W5f4XYCaAd9BvUmFQJgKmkSNHOGwKiz5pAYMsMb3e0/" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXl9hnYhgSvce14DdN-_Gs1RVqYjlnlaVs1yVib4pDuh-8_1MI7-2M581CXdzx10F7cbm1F4US-SEFhyphenhyphenQ-bc62A2vpDIGMhCIG6m-wG8SPT_frhRuXg13W-YdRYm7A_uJaZ4aDGB4VGZo/" />');

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflBlVpc5N423aGtEEAxiymfUT_dq7XX0jyY3uJRrdYLRTPZvd6RKKiEt4kk3oN05zMRhmQzLxa6P-QNbO93Zo5iFLxBin8GKqSdRDebNmGy2oTbQGK5mCVUMuEvwt6DFR5trnhts-FcA/'/>

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!