Emoticones de Skype encima del formulario de comentarios

10 abril 2010

Emoticones de Skype encima del formulario de comentarios

    3 comentarios
Muchos ya han sidos las entradas en la que he publicado como colocar emoticones encima de formulario de comentarios para tu uso en las entradas y para los usuarios en los comentarios. El tutorial es muy sencillo de entender, y los codigos son 100% personalizables con tan solo cambiar la URL de la imagen de cada emoticon y colocar la tuya propia.

Antes que todo, es necesario que veas una demostracion


Sigue estos pasos


1. Ve a Blogger > Diseño > Edicion de HTML
2. Marca la casilla "Expandir plantilla de artilugios"
3. Busca el siguiente codigo

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

4. Justo debajo del codigo que acabas de buscar, pega el siguiente.

<div style=' width: 370px;  text-align: left;  border: 2px solid #0084ce;  background: #FEF9EA; padding: 10px;   color:#0084ce;  font-weight:bold;  '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkm-5vDNMHxhtDrQYo6IZtpVQhLXiEhuK5YSLxprXuVfNgCjcPmJyH6BgFtVYwhN0Y9Y2csQ-2Pe6ZT3pQD17mGgaFy67P5LflHM_x93i481OoTtdSRafuleSeFQKk662U4R06N1Xf7w/s800/emoticon-0100-smile.gif'/> :a
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjut8R1GoLKEwcwNI7T3NEMvXD00q7lSXyjALUyIHU-vLcbNcZAKEUgTBtOoVXwI5bkYwYNfhCssU4ka151Yg1HgFnCQW4m-9D3yuKEjbjIwT6STP5X_IlJFqv1vw5S14hcazQYyiWHd5I/s800/emoticon-0101-sadsmile.gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37QdbBSL-dWFzKdrzDTV6dlUBB0jzeVlUrpBl3ms7Wt8hqjLK-_JY7BKIJZ4CAFSQgU5Hd8lzEJEPNO2uok8c8KlF4IkJ1d9MHRBmz2pLFMimb9jLxoYBMG5qRAH7Ir9YEyNRxBjGzk4/s800/emoticon-0102-bigsmile.gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4WCNyOnclU6oJQBrS5Dn-o0H6iGpbA7UyZ8jMg06XuutjkvUsUGPIQfVv47F9xE4lhU5s9u6PTBzu1ZmKsY28EULgqFWhBOP9uOCMXrj_5RkrNbDMnq8MyzZhF_tKj8LZY63wZ5Dv3g/s800/emoticon-0105-wink.gif'/> :d
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekTfOztt24cE64lqhRO7ZqMTH0xzjO2t5YDg_nsey3cHP2-yd8blqQWu9uh7Q9ZT8X91bWeMt17OTn7KJeAX2WpP6FPQsdiZMThUfiQNypt_wjB1iJW6QaZDpBYgYp4g1Snnj6uPjVcU/s800/emoticon-0104-surprised.gif'/> :e
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYVr7BCeEyL93F6GUDF-VKO5iH_Kr8R75Mobyc3PDlm45XPo_erf-a0gMfSIHRmbhvqOfSKQ7Plcymo4ER_WCl9o50TWJoPljZwPXCOtrUZdmm0Eew6DZCpfrgoRl495lj65OLawYEFfY/s800/emoticon-0106-crying.gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwafz7_sHwlXS6pEH5vhSEGNXmeYqY05pH6y5IIuJsmuJfH4dim4D5RN1Tc5aB_Tb_BSvsU7NJRukMFEa2gBNATox3hpmVLoAZJSpb7oJTY9A6g3UPpjtDFZFZu2uz5-CDKGzyHF84uAM/s800/emoticon-0109-kiss.gif'/> :g
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NepH8kKetaNiUYutSreoWgjVWCPHviiJcN25MJMAxE4kzI6dZyJvjHceULC2yn4IUu0akwuVX9OZOTaqGauQ5xb-XXyMNKw9Yl1tgu6QfKhTiy13W_gVOO7MZT_czNSUGnf9aSmwPWc/s800/emoticon-0111-blush.gif'/> :h
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAgeTQNMqytzowK3PODBMu7EcEWK54FeK3l1f3xnAQfOgGGDAnbVIZKUkDn_J0pWxt_EDlA5znD6m-MilEDR2MBpKZDlakE7zS1TYM_RukoUWi0JNSmgF74RHlUMGEi3j2JNlqMFU-fg/s800/emoticon-0110-tongueout.gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESC8k_bfXpeBqxNhlNurXRNPr75O91JEtDwFdXlg3wmZl_UpAZkbXJnM_RP8d6pvv1fi_00WNdyvVnqKy0ZmNPYeI0KuF_5oQfjc2dciKpObUHN9ziFeSq6Huxn_3FaJT25K_OgSEphI/s800/emoticon-0126-nerd.gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHhyphenhyphennF4hnQVleUvL6-oZ9np5GOxFHJTOF3VLTO9qjrgJKS6Rf6YqO90Wt8X91eEOIy9EZKwwTHG63CxSVYI_-guu9k0sKpWYvCmiojsJDL250bCRpukQ5x0sCVxhyrj3r8Jquc8NZvmQ/s800/emoticon-0103-cool.gif'/> :k
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjVIGb-Gkaf-S2SNHlBc8NOeTMB2fpzZx6i7t2ZVHAa0lVpIqaw2NxAhM8AlC6IQjipC3qP24igJWJHdDamRynYOhle9tfBRENw_swcdcud87y61sVLEJg3_niWMgYSs0rvm-kppPmPY/s800/emoticon-0130-devil.gif'/> :l
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp81OwguRJySLgjYcmC0I4kVE4oSCS1_-hexs5byVVeRGg4td51zdCmumHnDAEZwXoC-wRSN5JTksRi3tsxo5rz8D2moT2w8KAeIvEd_OGN9REbBVTU2bmKYsC0Tq6OtnX_HqGgJEBTtA/s800/emoticon-0133-wait.gif'/> :m
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTWrLSQNR449i-iLcGw-ewmjYHPxXxm-HcrG-F1YJz5AW3mHqSOP-qcCOP-sKovsL0jh0SqLmHdXswtQIzWEnM55ewiGelSUlz0ZP4pj36b0cNpuXKeB8834717JA_FwsZFZUQE7Si34/s800/emoticon-0137-clapping.gif'/> :n
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_OHc8auD-0vNxOpRefTlXd7OrClW67s6tR9_HNNLUikziVzkQbulJGH9AuYNs_CL7P57APfyL8u3wby4aWbEMeOZ8Aq5By3IAfzvDOJUiy4uO3miRDSyLtOIEn9BJTWsIn7hQVAUFto/s800/emoticon-0136-giggle.gif'/> :o
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAnkwPmeckFB7vi0R379yWNYf6hlv5rjvHuY2R6e1iqDOyoLIZBxEL4ZeFluXq8f2lcATTJ41x_4J1SZRkfIVHoqJqaV_9SoNSWBfDZ-Fs8hXQO6WB5gR1-YozDjeNurRSH-vTQSf_vI/s800/emoticon-0141-whew.gif'/> :p
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXKgQY_YZuFbuk1Ub4ux12nffJmi67ZeABjvNinJbAKHGiU1XMZJCPi4byeRQ1PpZtVehz_PXjZRSfG27C4j7yi_F67x5cHtyAPgdGFYI2LautXIeKqFhDOEjIaWKs9tTETpRCmrKqMI/s800/emoticon-0148-yes.gif'/> :q
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1XNTx4MaBh0V87bLyt-zoTMcKYE-PP8oSv_6ZtVH-pUjOcLIpzRZY2yuhZnJrPrrMDEb0Puy1oHosAgxkDqGDRKkHrapHngt2W3ZBddrWfC1OuJaWOYSdEmpkpvTox8GdDFP0L-SDhg/s800/emoticon-0149-no.gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwE71-SQobtGGv_sKz8hXXkL2djxf3USDfhC0MQO5Lw3HsWBAqr0Rs8tDQSZDryuAjBboJiAUcUhRPYWq9cK1Qf0audItBEjzxakVihoHocZQ-bNR7DmFk0oojw-GpDl8PDBpmqxhnV4/s800/emoticon-0178-rock.gif'/> :s
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdFWWru2UTZyOTWlQ5S5VUV9MO2bEOehrxAlfCuFEv76G7mUj7gYKmY-wy_385V64YnFErqCwNszpVYNykFXxXRtPuRTtyIQ2gO5bQUeL3gdighu3kCc2S8r8Kxh-t-6C1LbaYCeSjBE/s800/emoticon-0155-flower.gif'/> :t
</div>

5. Guarda tu plantilla, y se vera algo como esto:

Nota: Para cambiar la apariencia del rectangulo puedes editar el codigo en color verde.

Ahora, encuentra la etiqueta </body> y justo encima, pega el siguiente codigo

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
       if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
           _str = b.item(i).innerHTML.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESC8k_bfXpeBqxNhlNurXRNPr75O91JEtDwFdXlg3wmZl_UpAZkbXJnM_RP8d6pvv1fi_00WNdyvVnqKy0ZmNPYeI0KuF_5oQfjc2dciKpObUHN9ziFeSq6Huxn_3FaJT25K_OgSEphI/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHhyphenhyphennF4hnQVleUvL6-oZ9np5GOxFHJTOF3VLTO9qjrgJKS6Rf6YqO90Wt8X91eEOIy9EZKwwTHG63CxSVYI_-guu9k0sKpWYvCmiojsJDL250bCRpukQ5x0sCVxhyrj3r8Jquc8NZvmQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjVIGb-Gkaf-S2SNHlBc8NOeTMB2fpzZx6i7t2ZVHAa0lVpIqaw2NxAhM8AlC6IQjipC3qP24igJWJHdDamRynYOhle9tfBRENw_swcdcud87y61sVLEJg3_niWMgYSs0rvm-kppPmPY/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp81OwguRJySLgjYcmC0I4kVE4oSCS1_-hexs5byVVeRGg4td51zdCmumHnDAEZwXoC-wRSN5JTksRi3tsxo5rz8D2moT2w8KAeIvEd_OGN9REbBVTU2bmKYsC0Tq6OtnX_HqGgJEBTtA/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTWrLSQNR449i-iLcGw-ewmjYHPxXxm-HcrG-F1YJz5AW3mHqSOP-qcCOP-sKovsL0jh0SqLmHdXswtQIzWEnM55ewiGelSUlz0ZP4pj36b0cNpuXKeB8834717JA_FwsZFZUQE7Si34/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_OHc8auD-0vNxOpRefTlXd7OrClW67s6tR9_HNNLUikziVzkQbulJGH9AuYNs_CL7P57APfyL8u3wby4aWbEMeOZ8Aq5By3IAfzvDOJUiy4uO3miRDSyLtOIEn9BJTWsIn7hQVAUFto/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAnkwPmeckFB7vi0R379yWNYf6hlv5rjvHuY2R6e1iqDOyoLIZBxEL4ZeFluXq8f2lcATTJ41x_4J1SZRkfIVHoqJqaV_9SoNSWBfDZ-Fs8hXQO6WB5gR1-YozDjeNurRSH-vTQSf_vI/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXKgQY_YZuFbuk1Ub4ux12nffJmi67ZeABjvNinJbAKHGiU1XMZJCPi4byeRQ1PpZtVehz_PXjZRSfG27C4j7yi_F67x5cHtyAPgdGFYI2LautXIeKqFhDOEjIaWKs9tTETpRCmrKqMI/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1XNTx4MaBh0V87bLyt-zoTMcKYE-PP8oSv_6ZtVH-pUjOcLIpzRZY2yuhZnJrPrrMDEb0Puy1oHosAgxkDqGDRKkHrapHngt2W3ZBddrWfC1OuJaWOYSdEmpkpvTox8GdDFP0L-SDhg/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdFWWru2UTZyOTWlQ5S5VUV9MO2bEOehrxAlfCuFEv76G7mUj7gYKmY-wy_385V64YnFErqCwNszpVYNykFXxXRtPuRTtyIQ2gO5bQUeL3gdighu3kCc2S8r8Kxh-t-6C1LbaYCeSjBE/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwE71-SQobtGGv_sKz8hXXkL2djxf3USDfhC0MQO5Lw3HsWBAqr0Rs8tDQSZDryuAjBboJiAUcUhRPYWq9cK1Qf0audItBEjzxakVihoHocZQ-bNR7DmFk0oojw-GpDl8PDBpmqxhnV4/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkm-5vDNMHxhtDrQYo6IZtpVQhLXiEhuK5YSLxprXuVfNgCjcPmJyH6BgFtVYwhN0Y9Y2csQ-2Pe6ZT3pQD17mGgaFy67P5LflHM_x93i481OoTtdSRafuleSeFQKk662U4R06N1Xf7w/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjut8R1GoLKEwcwNI7T3NEMvXD00q7lSXyjALUyIHU-vLcbNcZAKEUgTBtOoVXwI5bkYwYNfhCssU4ka151Yg1HgFnCQW4m-9D3yuKEjbjIwT6STP5X_IlJFqv1vw5S14hcazQYyiWHd5I/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37QdbBSL-dWFzKdrzDTV6dlUBB0jzeVlUrpBl3ms7Wt8hqjLK-_JY7BKIJZ4CAFSQgU5Hd8lzEJEPNO2uok8c8KlF4IkJ1d9MHRBmz2pLFMimb9jLxoYBMG5qRAH7Ir9YEyNRxBjGzk4/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4WCNyOnclU6oJQBrS5Dn-o0H6iGpbA7UyZ8jMg06XuutjkvUsUGPIQfVv47F9xE4lhU5s9u6PTBzu1ZmKsY28EULgqFWhBOP9uOCMXrj_5RkrNbDMnq8MyzZhF_tKj8LZY63wZ5Dv3g/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekTfOztt24cE64lqhRO7ZqMTH0xzjO2t5YDg_nsey3cHP2-yd8blqQWu9uh7Q9ZT8X91bWeMt17OTn7KJeAX2WpP6FPQsdiZMThUfiQNypt_wjB1iJW6QaZDpBYgYp4g1Snnj6uPjVcU/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYVr7BCeEyL93F6GUDF-VKO5iH_Kr8R75Mobyc3PDlm45XPo_erf-a0gMfSIHRmbhvqOfSKQ7Plcymo4ER_WCl9o50TWJoPljZwPXCOtrUZdmm0Eew6DZCpfrgoRl495lj65OLawYEFfY/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwafz7_sHwlXS6pEH5vhSEGNXmeYqY05pH6y5IIuJsmuJfH4dim4D5RN1Tc5aB_Tb_BSvsU7NJRukMFEa2gBNATox3hpmVLoAZJSpb7oJTY9A6g3UPpjtDFZFZu2uz5-CDKGzyHF84uAM/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
           _str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NepH8kKetaNiUYutSreoWgjVWCPHviiJcN25MJMAxE4kzI6dZyJvjHceULC2yn4IUu0akwuVX9OZOTaqGauQ5xb-XXyMNKw9Yl1tgu6QfKhTiy13W_gVOO7MZT_czNSUGnf9aSmwPWc/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
   _str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAgeTQNMqytzowK3PODBMu7EcEWK54FeK3l1f3xnAQfOgGGDAnbVIZKUkDn_J0pWxt_EDlA5znD6m-MilEDR2MBpKZDlakE7zS1TYM_RukoUWi0JNSmgF74RHlUMGEi3j2JNlqMFU-fg/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
           b.item(i).innerHTML = _str;
       }
}
}
//]]>
</script>


Si no funciona, puede intentar pegando el codigo por encima de la etiqueta </head>

6. Guarda la plantilla, y disfruta tus nuevos emotiocones

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


3 comentarios :

  1. ERICmayo 07, 2010 11:08 a. m.

    Gracias por tan estupendo material, Saluditos a todos!! =)

    ResponderEliminar
  2. Unknownmayo 11, 2010 9:01 p. m.

    saludos eric.. que bueno que te haya servido.. perdon por ausentarme tanto...

    ResponderEliminar
  3. Anthonymayo 12, 2010 10:33 a. m.

    saludos eric.. que bueno que te haya servido.. perdon por ausentarme tanto...

    ResponderEliminar

Suscribirse a: Enviar comentarios ( Atom )