Hola amigos de Mil Trucos Blogger, estos días luego de revisar algunos tutoriales antiguos, me di cuenta que había uno de emoticones para Blogger que estaba algo caduco e incompleto, es por ello que en el día de hoy vengo a presentar un tutorial de emoticones completamente actualizado y funcional.

Emoticones para Blogger (Actualizado 2016)

Primero debes ir a la edición HTML de tu blog y pegar antes de </head> lo siguiente:

<script type="text/javascript" src="http://yourjavascript.com/40992618101/emoticonesblogger2016.js"></script>

Ahora antes de </body> pega lo siguiente:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
emoticonx({
emoRange:".comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Haz Clic sobre el emoticon para ver el código",
emoMessage:"Para insertar el emoticon pegue el código en la caja de comentarios."
});
$('.sevidatabs').simpleTab({
active: 1,
fx: "fade",
showSpeed: 400,
hideSpeed: 400
});
//]]>
</script>
</b:if></b:if></b:if>

Hasta aquí ya hemos agregado el script que hace funcionar los emoticones y  el formulario donde se muestra la lista de emoticones; ahora lo que viene es hacer que la lista de emoticones se vea siempre sobre el formulario de comentarios, sin importar si el usuario va  hacer un nuevo comentario o va responder a un antiguo comentario.

Busca la siguiente etiqueta:

<b:includable id='threaded-comment-form' var='post'>

Ahora se debe agregar un div de apertura y otro de cierre con el id ‘mensajeform’, de tal forma que quede de la siguiente manera:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<div id='mensajeform'><!-- Apertura -->
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div><!-- Cierre -->
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

Hecho todo lo anterior solo resta modificar el script de los comentarios de Blogger, donde se debe reemplazar:

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

Por la siguiente línea:

document.getElementById(domId).insertBefore(document.getElementById ('mensajeform'),null);

Con esto la lista de emoticones siempre aparecerá encima del formulario de los comentarios de Blogger.

Este truco funciona muy bien en los comentarios anidados, de hecho hice las pruebas en un blog con comentarios anidados: blog de pruebas emoticones.

Si tienes alguna duda, déjala en los comentarios; qué con gusto te responderé.