Los emoticons(emoticones,smiles)
, ayudaran a los visitantes que deseen comentar poder reflejar algún estado de ánimo o gesto que a veces es más fácil expresar con una imagen.Vamos a ver cómo agregar emoticons en el blog,estos son los emoticons que verás (son la base,luego se podrán añadir,o modificar nuevos al gusto):
*Aparecerán sólo en los comentarios, y para ello usaremos un script que hace que los emoticons sólo se ejecuten en el cuerpo de los comentarios para no interferir con otras áreas.
1ºEntramos a las secciones de Blogger de "nuestro Blog",en Diseño,Edición de HTML,y seleccionamos la "casillas" de "Expandir plantillas de artilugios",(como se ve en las imagenes).
2ºPara buscar las zonas de la plantilla facilmente donde pondremos los códigos,pulsaremos en nuestro teclado ahora "Control+F" y se nos abrirá una ventanita de búsqueda en la parte de abajo,como se ve en la imagen y buscaremos
</head>
*Una vez localizado,justo antes pondremos el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<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/AVvXsEheS8GhsheGEZ0PqXn5bVbx_zI0ybHJlg-7LIbUJ1-njoQAHYzMMr0WfOGJ0LwcffjPGWjswRCLLTFG7hfi5Nou9Yq-vY3U1zytybirW18W3d4dcwK9rbZpym58fPC1g3lyJRSO4OLiWPU/" />');
// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfciwqvZCWA6PfVcgfx2jEfkQJ8sp-tlt19jvOq5cBAdojSM43jG-6jMSqxaVByO7jQev94EaEetvQ8-z36F1HpbpK2vMnmFYxCoV6aVOadtDPQ2S9XHlas3Z6uEo697f73Taxm93sQcA/" />');
// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmnvN5nTCdyS1KLoo1S_dgv23xQO8-uVeuzOpeF19Y4DGpg34Eoffv7mTpv2FtJE8DSnJEjxB0UJk8XFzS63-llS3_B4BlPxabF0NjMe8WEWyuip_r-2NbkrvbvYp9F5z-VzaG4ebkyY/" />');
// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeL32i1CPFZZ0YfwNWS5A-VrAPcVVHvJttuyNcfj7xqjjUlgV8DooZdnVzsMldNn6mTYncQx_2O87cO43wrzamWh1CPzQsRMkt_Hvju0NAVf-iwC8IeglOUUGwnR6w9ApeLrqeGe8Xhjo/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeL32i1CPFZZ0YfwNWS5A-VrAPcVVHvJttuyNcfj7xqjjUlgV8DooZdnVzsMldNn6mTYncQx_2O87cO43wrzamWh1CPzQsRMkt_Hvju0NAVf-iwC8IeglOUUGwnR6w9ApeLrqeGe8Xhjo/" />');
// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxn0KFK8LiryTjzYg9h9I_uQWdKmGphB5Q8-kdOdAZIPtVFqAyX6EX3YWGg3byxHLW0R39SV4uYgy-zEUeHTCzt9v5diyRrM33c0TwXSVRLtPJHVJlTLX2ShqBnKoqGqPsANnDaErXe4/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxn0KFK8LiryTjzYg9h9I_uQWdKmGphB5Q8-kdOdAZIPtVFqAyX6EX3YWGg3byxHLW0R39SV4uYgy-zEUeHTCzt9v5diyRrM33c0TwXSVRLtPJHVJlTLX2ShqBnKoqGqPsANnDaErXe4/" />');
// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYZOepVAR64Cx5UzQaiA9_jH_lWyxpH02I9JF3hxbhl1_8DfBCTMYFLhgxT0zeB4MOPDVArG0IZHKe83AW2uGu5Jij-uLZOSZfa34LQ8_BrQcf_0VFI16HoDHSY9zr0X__FqU1XJT6UI/" />');
// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGQfFv-H1JMWXekCI3qeLmFVan5i5UbamD2znvOQOZI6XOBw7tb8z8GcSfbwbX-B9kx-bGImjSxwClo5o2KBZ6QUd53chYZ-j_b1-lLzZ8X_n_WH8rdoto1n_hT5rO83x7cucPp1b73g/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGQfFv-H1JMWXekCI3qeLmFVan5i5UbamD2znvOQOZI6XOBw7tb8z8GcSfbwbX-B9kx-bGImjSxwClo5o2KBZ6QUd53chYZ-j_b1-lLzZ8X_n_WH8rdoto1n_hT5rO83x7cucPp1b73g/" />');
// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLc6hDe038QxN1kdEHVwhmr_NYQczwrinKe1ySxQZMZnHZm2c_e6wYy-yf_YyHpFAkLVR98EPQ_eFUeTiACMds5vqc4UjewLr9fTE8pVqQBAixfMnU7PjfN_rl_6yZI98s3GdH-0KGWY/" />');
// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQOW1mirzFXHVt6DA39_-VbU2mFL9XGmS8EHH4ON_-auSjQzt-dCj79HUVQhyYTF0USO-IU9D96hsjs2a5KXwj0fz6HNEdZkFhhoo-j3Dh3Z_t6zf0cQckRW0RQBC82h9ShbuWg3425oA/" />');
// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI-QN2Y833cPKPoq1W9VWBHVwgfDHT6vrelFZchKkdYQLSsuMwX3ZA67mEbvfIfZ4gNTrv1240scieR6hCdXTmuwKln9wRT7l5v7Y4GATZmte6Y0IaFJ2JYz2RJgfLADMLdjakfZi1YQ/" />');
// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViwj7ZjkZhK95dyz2g0eqV9KHT2pWWpYRmSulxnjoriVywIMoxulYoEHt-tREaKusE6pMR8UDztPcEvnHL2nVHkoE5QFhfp0bqrApWCSz3Mf2h43HJ-JNsqKHO4Y2O7r4F53d41-4jtA/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViwj7ZjkZhK95dyz2g0eqV9KHT2pWWpYRmSulxnjoriVywIMoxulYoEHt-tREaKusE6pMR8UDztPcEvnHL2nVHkoE5QFhfp0bqrApWCSz3Mf2h43HJ-JNsqKHO4Y2O7r4F53d41-4jtA/" />');
// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mYGdybjj6-pPQb32MoWzIiSZCEbruLg8irbd5cidUqPy4X0nEx9Y2T7AxI3O1XhZa53zSXv2bMME-lFG04hc2Zhox6otNrO06bYuZXkd0ufUO1qlSB_DIBvUMKZq9ANA5tC5sGTLlGA/" />');
// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_xG44W_Pl8XB93OOpZiM0fntS9fQ3Mkvw1G2azxKJyH-AZ6xOcBDJUfUeQqjCvNS_O_I8N-szF6l43Um_GDk9S2tGfjCYy4OFakaqZbyAV9AZVSD93kfVYcJBh-h3HkL_6Bg10lTsfk/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_xG44W_Pl8XB93OOpZiM0fntS9fQ3Mkvw1G2azxKJyH-AZ6xOcBDJUfUeQqjCvNS_O_I8N-szF6l43Um_GDk9S2tGfjCYy4OFakaqZbyAV9AZVSD93kfVYcJBh-h3HkL_6Bg10lTsfk/" />');
// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYYae0S0JI5QQ9dXiec-uHvYXBri9mcxPBMF-7Ui51wFdyiiONqA0V0sDOIYWBZYP8YWbREclfCva0yClnuxNOSxMyJUoJzRBBnj2SR8f2csZEVwnHtWHlJkluQ62y3UAM0LYkSyCqJhI/" />');
bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>
3ºAhora Buscaremos esta parte en la plantilla "recordad con Control+F":
<p>
<data:comment.body/>
</p>
*Una vez encontrado cambiamos ese código por este otro:
<p expr:id='"combody-" + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = "combody-" + "<data:comment.anchorName/>";
emoticonComentario(emoticon);
</script>
4ºAhora,Buscamos esta linea:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
*Muy posiblemente la encontrarás
dos veces,
justo debajo de la segunda que encuentres agrega esto:
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKOjK6GPOtg1fp3fuSFujcE3Qjyi4nJgmNOcNSW6sjKtIxySPASkWFV_Ew7_3oWIeRE8mgi5xjfOaSyvEnjA7XQSav1iUO7RR6DaflWlUPSpzHMnwlGsHF1bp-XsuUeyGbRXRmoz-Gvs/'/>
5º"Damos a vista previa" para asegurar que se ha hecho todo correcto,y le damos a "guardar,y listo, tendrás estos emoticonos en tu blog. Estas imágenes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese pequeño borde alrededor de ellas.
*
puedes cambiar los iconos por los tuyos, sólo busca las URLs de las imágenes del primer código que corresponden a cada juego de caracteres.
6ºComo parte fínal y para que los visitantes que quieran comentar sepan que los comentarios tienen el script de emoticons,pondremos una imagen que lo indique para que puedan darle uso,
*Marcamos "Expandir plantillas de artilugios" buscaremos lo siguiente pulsando "control+F":
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
*Ahora sólo tienes que sustituir lo que está en rojo por el siguiente código:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAgXu9Z6Zfn7hLrNozR4_KDhNDRFsgAtlSEPqH-fAPSXw1pgRv4ay4fXuYGBE_o073dUec1A3r5_vK5k9_60xUTKChgJpf6-ZknK58Yjq-NWihZ7HMgEMgvvE2ePtV9BL3hVLCxaBqc0/s1600/emoticonescomentariosayudablognovatoblogspotpuntocom.gif"/>
*Guardamos,y comprobamos el funcionamiento,espero lo disfruteis y vuestros visitantes.
Actualización de este tema: Sustituir "Comentarios".
a las grandes posibilidades que tenemos al poder mostrar tanto "el numero de comentarios"(con tamaño editable),como poner la imagen que queramos "gif",que pondremos según el diseño del blog y que indicará mas visualmente cual es la sección para comentar en un blog.
"Control+F"buscamos lo siguiente: <span class="post-comment-link"> "Incluido este código y hasta: </span> ¡Lo borramos! ,(Son unos 10-12 renglones "cuidado no borrar más,ver imagen).
2ºAhora una vez borrado esa pequeña parte:Buscamos ahora: <b:includable id='post' var='post'> justo detrás "Si no hay espacio damos a Enter",ponemos el siguiente código:
