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.
Bien,este es un script,que se agrega en la plantilla,es un script que nos sirve para hacer que caigan "diferentes motivos" sobre el blog,pueden ser estrellas,nieve,hojas,o como en este caso "corazones",podrían ser cupidos,o cualquier otra cosa,tan solo cambiando la "url de la imagen".
así de esa manera localizamos el código del script,para localizar la "url" marcada en rojo,la cual sustituiremos por la dirección de la imagen que nos interese,y cuando no queramos mostrar nada,simplemente borraremos la url que hay "entre comillas" para esperar a la fecha que nos interese poner otra imagen.
