Diversas y Variadas (Ayuda Blogger): Comentarios

Mostrando las entradas con la etiqueta Comentarios. Mostrar todas las entradas

Emoticones de Facebook en los comentarios de Blogger

Hola. ¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Bueno, hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata de cómo hacer para que cuando nos dejen un comentario, nuestros lectores puedan adornar sus comentarios con emoticones, pero con los que vemos en facebook. Es muy fácil de implementar. Y es válido en los comentarios anidados de Blogger.

( ↪ Ver DEMO)

Bueno, empecemos.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </body> y justo encima de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Emoticones facebook en blogger
//diversas y variadas
// <![CDATA[
function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

cualTexto = bodyText.innerHTML;

// :)
cualTexto = cualTexto.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3tpyEiShNpSGvUmEBUSQF1F_EuCIS0l5GSp5qE1T0THUIf2b9YtIs-lKxuWdaBwhFJFo7OyOVzzUGnNRBKjCYuxA_D6A1KA1uDDmxPibFit2Y9mFTl-g_MJBBJ_142FSYNQ88RIJEB_u/s1600/1.png" />');

// :D
cualTexto = cualTexto.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCqONPaqX5SlfydRuPrn9_HybArE8U-AevchQ3hnp4U-npbnXlFAvAJd8OeXLg8ESZLn6pP_3a0Rif0l1PPnN7JlVal6aUpWLxkvG8IkcByF2lNBtB9OxYsgZ32KexVKbX50-WfnyEZqn/s1600/2.png" />');

// ;)
cualTexto = cualTexto.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3MDykv0AdgGYONM_6Mh3z8nWNR2Gp0cpOhKUkJgXw7KxaQB4hbEBQiZ2EKz4JE6VmgnOY4KuhLiR3gIrKCpx62LwOQ8pn3K8NnunDKFEAe_I4_o4DbAu1DXN4r-xhip-DZrP0eZ3-UGO/s1600/3.png" />');

// A_A
cualTexto = cualTexto.replace(/A_A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTFywWuhbILCqU7eY8CguQjwDZ_tmBWesaOol2jPJiCr88cGnh4FKsDvjq23XEjHC4cMviZUfS1sQ_TzRWqZ9QCWfPtV_7FPzNp-e1dM_IxOlsZdmFk0Vr6RToNQf5rM_4XRAQuiDWBlW/s1600/4.png" />');

// XD
cualTexto = cualTexto.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQApxkqIMJAzGJUHZlccAK3j0nsbs7iVWKAc5LDuBnPx-Ya7Pd4uIn-uvU-hm-BYGK9uLcWK5_tKWsuBO19r37kEMkw2sqvFyoJCGyCDIQns_VIasQSGqKehgyeTU702YKksTA4rNjolk/s1600/5.png" />');

// :3
cualTexto = cualTexto.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIvp60lCayEB0QPK3JJziyGklOERscjCb3QRkrt1sGO3ZlT91OYroflPT04zYPpZmDiFvTgCBj07Tu5LTsqtYkYiDj1UNRqT-vnkFvbgcvef7b3gjfD8QwW64WnBKQplB6uM8FHq8PA_I/s1600/6.png" />');

// X(
cualTexto = cualTexto.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pFolmndHn77lKL_gFUXlA7Jlt9jx2g4fptz_4-yQQ_pbT8BHVXwxblvxJMk83Vv-2HpfGFCYiKjN2DfRmDSVj0Llt4pUhvlECWwHri1FYdswgDRFr1PmptP1Vq5WcOzGDhtncEoclTKX/s1600/7.png" />');

// :(
cualTexto = cualTexto.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKx_V5Vdr7Tux-QZv59-M3EQmRanzKxcuGpLaR2WABCyqH5SplUnQ2MkyD7FwIUCpHtBLziI9EbceOvJw_XvjaCjjCO4AuYkzwq_xusm8C6X38HYIP0FlgDu_FTQtYp4GQguhIcDGUo74o/s1600/8.png" />');

// :'(
cualTexto = cualTexto.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTozBz_lnP2mpUxnofKNfKGATkthv0fjcbsJS6xUTUcUPcenR3XBpcgMSWeinVqgjUD-o52U3B-AbovC-5g01wy-x_SGRg0KwF43T3YWjHPfR0tZPUvYqZxlHOw8E7yT-9tObtpltjL0R/s1600/9.png" />');

// -_-
cualTexto = cualTexto.replace(/\-_-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsjeF8AAPID_gUPsDDTb1_aTsyGD8Ah6fTu5Bv-g37w6YsHKVJBWOUa6dYVj1GjEZ5-Pp5cbAv7NWyOPGkSwUBrik1vK8NZ3XaZvaBH6SZ0Q8Zx-MAvqos_VCIrTQSZxj_0dz2TKABeFZ/s1600/10.png" />');

// :-
cualTexto = cualTexto.replace(/:\-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPfG36omtjAWnXJOMC3ezpC1MNIVNam4Iw7b_Bgl3fcLoQn8JXYti2LwuG6qBXP5O36GF2FRlqE3UrXsT8__s5LzvwiAVjFnflsMkeiUUMvJFBlG_guOPKMYeDISEkizTdhGT7yly_PsM/s1600/11.png" />');

// 3:
cualTexto = cualTexto.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrJ0-aGg-eT737BXocMKtYn9nFJ3PDVhCOakFykhtVt_qSyTcYMXmtRqtc8uzQzMwqiY6dsMl0FEl2RfhrzX1QHWsfl_5jU6PCv4XLzsniurcrs5JrZKO73iNcYqW50CXsURRWGfIZdJQ/s1600/12.png" />');

// O:
cualTexto = cualTexto.replace(/O:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVT5lhSI3xaGh8hQjKUxiXhG47WPUjVzSmosK0UTsE7XrwVkjI1LiiMcGVmt0m4CI9SiEK8poy4b7xpSc1J2YwjMjj6-De6-IFv5llNz0R9De4FBFwmlp87UhQZobxRaTSCBBTYTOaW2_v/s1600/13.png" />');

// :*
cualTexto = cualTexto.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW9rg1OJrb7hpsRwfYB7A27hC0xy292Pgfsl9U7XDpbn43ZFMeU7P3bSeKnXk43F3RYqITLry3iblthJADkbcSWMWOXownX7MiHhDvcyUteTg6tifRaDtECZooxC0UD0xClxdHSTuBRlF/s1600/14.png" />');

// -3
cualTexto = cualTexto.replace(/\-3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbOTVBCRhuMkTHp8dNEz6ZwK-BsyiBIzpMCssPcs49lIk_9B0sDDMLZplKx2flYnrJJG-OQzmsnEAwb_P11tf1Sgca9ZF8pL1q9fme2jSHIsMUj4Dig16UorNzGVRvzfE-2eSfujFfxpp/s1600/15.png" />');

// :v
cualTexto = cualTexto.replace(/\:v/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhKvvrhZjJXWFqTH01PfZF2IeVnDkicjMQWjbjehRHVWEhC6ihHM4D4MZlJ1-L9AVAHcuDabh4tV8lx7JUkEUSIS5UUp7f3NPSh-Cg3jSe4JmjZq1D4zSQ01HUJp491NdUnkfyHoayPRa/s1600/16.png" />');

// :o
cualTexto = cualTexto.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb16894biAfsUIbLG9llJYFZzPr9CXaIats5pMkNhOeHyiXlGYmonMc-uCZzZinNEpYsVlgs3PvRkNjY7zSSrvpWrP8fLw9MBNRA2UjvSEKLdKvNqHgAik4jnoSq7iPv_t3AdaltGElwEk/s1600/17.png" />');

// 8-)
cualTexto = cualTexto.replace(/8-\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrtz1EL4Kq28kS48PEbMlirWcRUuHSpLzB1l9F-Bcakpp8tl4EK-qgXbI8afk9i88EmmDIZPdb0saVfEYPGmXliDPEEZpImE60SyhE9tYuyllzkv3is5FRYY-s9szIYzSCAQl3fL061c7/s1600/18.png" />');

// 8-|
cualTexto = cualTexto.replace(/8-\|/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYBPOSGcOLfx6koGcF9LFAy4aShx2PrxjGTUhBz2QXMGPInS2oChPtcS2uFSsdbdfWAqaXAW4cFAIzFGcib8v9dSSW7IE6wkuDoSKUi0lLV5JXEBlxT98dktiHB1oWzZsfmU-HpasPxwf/s1600/19.png" />');

// :P
cualTexto = cualTexto.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7S0BqaMuw-pjEhlFmRrdub_PDB9vJCIITtojqyGOAunaUgLGZJaeqapzLkRN815GXC7Un5IOEXfpGU34afFQI516lLvOXeZUwNJdqXADQWTuk5J6fd2fXMnO73Vo6DIw5gceNslOz4-W/s1600/20.png" />');

// O.o
cualTexto = cualTexto.replace(/\O.o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7n3XZlupmRGP9vH2Km5zExP8mMzvJfud1Hfa_8twZrbgcTRcCoP1Ecgwq6bytXsQWJwD1T1k2o9-2NUP6LaUNChN4nSKV6UzOCR-mg0illzkyc1tGNs8BDKYRdTEhfYjiWUsqAO3nc9m/s1600/21.png" />');

bodyText.innerHTML = cualTexto;
}
// ]]>
</script>
<script type='text/javascript'>
emoticonComentario();
</script>

3.§ Ahora vamos a colocar la imagen que le indicará a nuestros lectores cómo pueden colocar un emoticón en su comentario. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos <p><data:blogCommentMessage/></p>. En la plantilla veremos que hay cuatro líneas de código iguales. Buscaremos la segunda y debajo, pegaremos este código:

<p style=' border:0px;margin:0px 10px 0px 100px; '><img src='URL-IMAGEN'/></p>

Donde dice URL-IMAGEN, lo reemplazaremos por una de estas dos imágenes. La primera es para lo que tienen en su blog un fondo blanco o claro; la segunda es para los que tienen en su blog un fondo negro u obscuro:

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXyLb1ghPp74hyphenhyphenfldpDdZluFs0bdqqn9FmCNnULCgxscAtWJMrDkIAjFNNyobSOwL5QD9sbAqIyGQJvYUuoItASzlZ39DAC__C2PdDbuDCB1q-uBfh_t4pmbAf9O3zsifAorfX5ytSCjp/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jMoIHQqeSA1rMzz1kI9TIMk3gF2jSMJRZTiz3yG2c3idUiSSdr3UhYVkv9UcddMme9pj2BnVq115blQEdedQJwRR_yVo0eTBMP6By7xyHD75VMbP0citUvoudbpHPvYN3hPHHO6SK2mR/s1600/diyva_jessica_motic_fondnegro.png

Para centrarlas o ubicarlas a la posición que queremos, bastará con cambiar los valores margin: 0px 10px 0px 100px.

4.§ Nuevamente, damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos nuevamente esta línea de código:
<p><data:blogCommentMessage/></p>.
Esta vez buscaremos la cuarta y debajo pegaremos lo siguiente:

<p style=' border:0px;margin:0px 10px 0px 200px; '><img src='URL-IMAGEN'/></p>

Reemplazamos URL-IMAGEN por la misma imagen que utilizamos en el paso anterior.

5.§ Ahora, para que los emoticones no aparezcan debajo de la caja de comentarios después de dejar el primer comentario, haremos lo siguiente. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos la siguiente línea:

document.getElementById(domId).insertBefore(replybox, null);

Y la reemplazaremos por esta línea de código:

document.getElementById(domId).insertBefore(replybox.parentNode, null);

6.§ Damos clic a Guardar y eso es todo. Espero que les haya gustado el tutorial. Pueden dejar sus comentarios o alguna duda que tengan. Que pasen un buen fin de semana.

[+/-]

Gadget de post (entradas) populares

Cada blog tiene algunos post que tienen un mayor número de visitas que otras entradas, lo que se refleja muchas veces en una mayor cantidad de comentarios.
Hoy veremos cómo agregar un gadget que ayudará a nuestros lectores a tener presente las entradas más populares de nuestro blog.

Este gadget es sencillo de implementar siguiedo los siguientes pasos:

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript.

2.§ Pegaremos el siguiente código JavaScript:

<div id="Popular">
<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://TUBLOG.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Deberemos de sustituir http://TUBLOG.blogspot.com/ por la URL de nuestro blog. Damos click a Guardar.

3.§ En el código podemos modificar lo siguiente:
» aBold = true; si no queremos que los títulos estén en negrita podemos cambiar true por false.
» numposts=200; es el número de post de donde se saca el promedio de post populares; si tenemos más de 200 post deberemos cambiar este número.
» maxshowresult=10; es el número de post que se mostrarán en el gadget; podemos aumentarlo o disminuirlo.

4.§ También podemos agregar algunos estilos al gadget. Para ello vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos lo siguiente:

#Popular {
/*Estilos para el contenedor */
}
#Popular ul {
/*Estilos para la lista de links */
}
#Popular li {
/*Estilos para cada link de la lista */
}
#Popular a {
/*Estilos para los links */
}
#Popular a:hover {
/*Estilos para los links cuando pasamos el mouse encima*/
}

Dentro de las llaves {} escribiremos el estilo que querramos darle a nuestros enlaces del gadget y damos click a Guardar.

Visto en : Blogger´SPhera

[+/-]

Resaltando los comentarios del autor del blog

Han sido múltiples las ocasiones en que me han preguntado cómo hacer para que los comentarios del autor del blog queden diferenciados o resaltados del de los comentaristas. Así que hoy, vamos a ver cómo hacerlo en este post.

♠ Primero vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.
♠ Buscamos ]]></b:skin> y antes de éste, pegaremos:

.blog-author-comment p {
background: #E6E6E6;
color: #000;
border: 1px dotted #223344;
margin:0;
padding:6px 15px;
}

Podemos modificar el color de fondo por otro o poner una imagen de fondo, cambiar el color, ancho del borde o eliminarlo, etc.
♠ Ahora buscaremos el siguiente código y pegaremos lo que está en negrita tal como se indica:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>

<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

» NOTA: en algunas plantillas, el inicio del código puede ser algo diferente, parecido al siguiente, pero no hay por qué alarmarse porque el resto del código es el mismo y sólo habrá que buscar con calma las partes del código sobre las que se debe de pegar lo resaltado en negrita:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

♠ Damos click a guardar y listo!
♠ Si queremos también darle algún estilo a los comentarios , que no son del autor del blog, lo haremos como siempre en /* Comments

► Referencia: SnapHow

[+/-]

Añadir estilos a los avatares en los comentarios

[+/-]

Nueva opción en Blogger : avatar en los comentarios

[+/-]

Top Ten » Lista de comentaristas

[+/-]

Nuevos gadgets para blogger

[+/-]

Algunas preguntas frecuentes

[+/-]

Eliminar iconos Open ID de los comentarios

[+/-]

Formulario de comentarios con diseño

[+/-]

Emoticones en el nuevo formulario de comentarios

Me preguntaban al correo si había alguna forma de añadir emoticones en el nuevo formulario de comentarios...Así que hoy voy a mostrarles una forma sencilla de agregarlos:

♠ Ingresamos a Diseño/ Edición de HTML y seleccionamos Expandir plantillas de artilugios.

♠ En la plantilla buscamos lo siguiente:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Y lo sustituimos por lo siguiente:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

♠ Buscamos </body> y antes de éste pegamos lo siguiente:

<script src='http://pauloens.110mb.com/codigosblog/smiley.js' type='text/javascript'/>

♠ Damos click en Guardar y listo, el código funcionará si hemos seguido adecuadamente los pasos y si tenemos los comentarios incrustados a continuación de las entradas.

Y el resultado es el siguiente; si quieres ver cómo se verá puedes verlo aquí