Emoticons en los comentarios blogger

Para animar el aspecto de un comentario, los lectores suelen utilizar simbolos 'habituales' de caritas que expresan sus emociones dentro de lo que cabe. Actualmente en tu blog, si en un comentario escribo ":)" ese simbolo, pues no aparece ninguna carita (ningún icono). Pero el siguiente truco es especialmente para eso, para que nuestros lectores y nosotros mismos podamos dibujar nuestras emociones en los comentarios.

1. Nos dirijimos a Diseño > Edición de HTML y Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:

<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/AVvXsEjKoUALekbqFsRU0-aGd0y0mG0iFgDAGnVeT3Lr_1In4bJHCU5J6Bb3pWjcyZRIfpO4uxnZgHv_l8u8AUxMjSM14Cv68FPYlw4V7JFdVT-mVtVcNbQChStlVVUhyphenhyphen_lBBP5rdZol0eW2K58/" />');

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

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

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJoNevbmgBwY9f-2F-mZiOoFKeY0-lwyNUWOGiw60wXcbrV1otT2IQG8zRruk28kznKkjTSwXjI9sI7_lD5daj1h36lqawGt3nwX4WHfTrR0nJU5ZqqxzljrIeXo8xvGJfxJg15XlMzs/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJoNevbmgBwY9f-2F-mZiOoFKeY0-lwyNUWOGiw60wXcbrV1otT2IQG8zRruk28kznKkjTSwXjI9sI7_lD5daj1h36lqawGt3nwX4WHfTrR0nJU5ZqqxzljrIeXo8xvGJfxJg15XlMzs/" />');

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

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1WWIsMJo-RLqS8Ork5c1jvEnC1DBCbC6d6Uuy0MjMLJ3jwdwjeUCp91xenFWWXG_Cn2eVxkXv6UWKJeT_QMkK9dQ1dHpak8J4wPy9yu7gVE5AQipoNqsTrdG9H5g1tl76MDz7uU4K6_E/" />');

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

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-GdTsJK6Ho6b3LHt1VIwpvV_AS0RTRa69h2HKjJtKb2bEhQ73ZKTIn-hpmrQ2_YKxziadBhKpHU5vl1MD-fcsoJ93aQyt4-OSaDMjGHeDp4KU2uKNpYUZ7e8Mf4bzaRSDqGxKgbL2iA/" />');

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

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnhgB0T2F2Y5m4kH3BprGPtce4elLiQsxnSyldEtqQyrDT-t_92OfZZidCBqk6I_VbKz5TJH-_VnWuvD0KA7qfIu9zuXgmYCQcyxRn5-UGrCRi3aXp4zfClbPvp83ssCTKj0gzyOtrTU/" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIOZ9VvxgD__Kum6BqZhoXtwCs3zIs3T7dUP0TDQcPBtQ5y6nOmFRFW2Jve7oRo1cy3nrt4W_rT-ca214WuEBPCWyBq7SEeWEIUrRkD1YjmIAD7PXV77iQBPQ5eLYgT4OFZJZT-hd2p0/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIOZ9VvxgD__Kum6BqZhoXtwCs3zIs3T7dUP0TDQcPBtQ5y6nOmFRFW2Jve7oRo1cy3nrt4W_rT-ca214WuEBPCWyBq7SEeWEIUrRkD1YjmIAD7PXV77iQBPQ5eLYgT4OFZJZT-hd2p0/" />');

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

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

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-N71OhJZw4cjXYrFOE39wnAM_yzPINAVOql1ML4HRhU84FiOuWo7Mw_fUZotTiYpx-dFkXjvwVjDw4MzsQNTovtK35aBLpuI6HpcrNcjvZ_wVnXya0xFROyag8mr-7OKoaWRB9B8JeQ/" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>

Ahora busca este trozo de código:

<p>
<data:comment.body/>
</p>

Y reemplazalo por este 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>

Y después busca este código:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Lo más seguro es que la encontrarás dos veces, justo debajo de la segunda que encuentres agrega esto, es la imagen que se mostrará arriba del formulario de comentarios:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcxH0HAtbxQnZNEsuYB3_4p82y46fwJoPR1TMK2iEZkxIiYPgOo53r3h5man-ZrXn2blh5Rq-cSHe2Mua1nR9ck9qbhl5PfzhhJvgasfkq3ArkVpns93mPYe73fFRQkozxIa1b09zmug/'/>

• Y por último le damos clic en GUARDAR PLANTILLA. Y listo! A comentar con expresiones.