Conversor de entidades HTML

Existe una gran variedad de sitios para convertir entidades HTML como:
Postable
Entities Online
Accessify
Blogcrowds
Simple code
Nosetup
Chuano, etc.
Y todos sabemos que estos conversores son útiles para mostrar nuestros códigos en las entradas.
Pero te habías preguntado como hacer un conversor de entidades HTML en blogger.

Bueno pues a continuación te explico utilizando los siguientes códigos:
Este primer código HTML será lo que construya el recuadro y los botones convertir y limpiar:

<form><textarea name="data1" style="width: 590px; height: 200px;"></textarea>
<input onmouseover="this.className=&#39;boton botonhover&#39;" onmouseout="this.className=&#39;boton&#39;" class="boton" onclick="html2entitiesthis.form.data1)" value="Convertir" type="button" /><input onmouseover="this.className=&#39;boton botonhover&#39;" onmouseout="this.className=&#39;boton&#39;" class="boton" name="Limpiar" value="Limpiar" type="reset" /></form>

Lo colocas como elemento HTML/Javascript.

---

Para que funcione el conversor vas a tu plantilla y buscas (Ctrl+F) la etiqueta </head> y justo encima incluyes el siguiente código Javascript:

<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>

Ahora si, ya funciona.

---

Para personalizar el recuadro y los botones buscas (Ctrl+F) ]]></b:skin> y encima de el colocas el siguiente código CSS:

/* Personalizar el recuadro y botones del conversor */
textarea{
background-image:url(Url-de-tu-imagen);
color:#000000;
border:1px solid #67A7E3;
font: 12px 'trebuchet ms',helvetica,sans-serif;
}
input.boton {
background-color:#006699;
color:#FFFFFF;
border:1px solid #67A7E3;
font: bold 12px  'trebuchet ms',helvetica,sans-serif;
}
input.botonhover {
background-color:#005599;
color:#FFFFFF;
border:1px solid #67A7E3;
font: bold 12px 'trebuchet ms',helvetica,sans-serif;
}

Los caracteres que convierte son:

[ ' ] se convierte en &#039;
[ " ] se convierte en &quot;
[ & ] se convierte en &amp;
[ < ] se convierte en &lt;
[ > ] se convierte en &gt;

Lo puedes ver funcionando en el siguiente ejemplo:

Por ultimo si te diste cuenta el recuadro tiene una imagen de fondo, si deseas quitársela y en su lugar ponerle color de fondo, solo cambia:

textarea{
background-image:url(Url-de-tu-imagen);

por:

textarea{
background-color:#006699;

y listo, ya tenemos nuestro conversor de entidades HTML. Espero te sea útil y nos vemos en la próxima entrada.