Para muchos de nosotros es importante probar los códigos HTML y editarlos antes de su publicación… por eso hoy te enseño como realizar nuestro propio probador de códigos HTML en blogger.
Primero empezamos con ir a nuestra plantilla y buscar (Ctrl+F) la etiqueta </head>.
Ya que la encontraste insertas arriba el siguiente Script:
<!--Probador de codigos HTML-->
<script>
function probar(texto) {
ventana = window.open('', 'popup', '');
ventana.document.write(texto);
}
</script>
Ahora vas a elementos HTML/Javascript e insertas el siguiente HTML que le dara forma al recuadro y botones:
<form name="probador"><textarea name="texto" style="background-image:url(Url de tu imagen); color:#000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif; width:590px; height:200px;"></textarea><input type="button" onclick="probar(texto.value)" value="Convertir" style="background-color: #FFCC00; color: #000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif;"/><input name="Clear" value="Limpiar" type="reset" style="background-color:#FFCC00; color:#000000; border:1px solid #FFCC88; font-size:12px; font-family: helvetica,sans-serif;"/></form>
Para ver el ejemplo copia y pega este código en el recuadro:
<marquee style="background-color: #005599;"><font color="#FFFFFF" face="forte" size="10">Bienvenido(a) a Blog 2000</font></marquee>
Para editar el recuadro y los botones, solo cambia el:
El color de fondo de los botones: background-color:#FFCC00;
El color de los textos: color:#000000;
El color de los bordes: border:1px solid #FFCC88;
Los tamaños y tipos de letra: font-size:12px; || font-family: helvetica,sans-serif;
Y lo ancho y alto del recuadro: width:590px; height:200px;
Si prefieres colocarle color de fondo en lugar de la imagen, solo cambias:
<textarea name="texto" style="background-image:url(Url-de-tu-imagen);
Por:
<textarea name="texto" style="background-color:#FFCC00;
Bueno eso seria todo..nos vemos en la próxima entrada.
