Hola, Bienvenido a ElementaryDownload!

Puedes seguirnos en las redes sociales o suscribirte al feed.

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Anuncia Anuncia Anuncia Anuncia

miércoles, mayo 19

Editor de HTML online

html editor
Seguramente te ha pasado que ves un gadget y lo quieres para tu blog, pero no sabes cómo se verá el gadget o si realmente funciona. Lo mismo cuando queremos probar nuevos códigos, dar formato a un texto, crear tablas, etc. suele ser cansado tener que entrar al blog, hacer pruebas, guardar, ver el blog cómo quedó, regresar a editar, volver a probar... en fin, es un procedimiento que puede ser muy agotador.

Para estos casos es muy útil usar un editor de HTML online que nos muestre cómo se ven las cosas que queremos hacer en tiempo real.
¿Para que sirve? Para escribir los códigos HTML que queremos usar y obtener la muestra inmediata del código en cuestión, así no tenemos que estar entrando al blog cientos de veces para probar algún código, simplemente lo escribirmos en el editor online y veremos los resultados inmediatos de lo que estamos haciendo.

Para hacer la prueba de ver cómo funciona entra a Real-time HTML Editor y en la parte de arriba borra las letras que hay y en su lugar pega el siguiente código:
<style type="text/css">
body {margin:0; padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:small;}
#header {
padding:20px;
background:#b81c03;
border-bottom:1px solid #fff;}
#header h1 {
padding:0; margin:0;
color:#ffffff;
font-family:Verdana, serif;
font-weight:bold;
font-size:190%;}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#3ba34a;
border-bottom:1px solid #999;}
#nav li {
float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-weight:bold;
font-size:90%;
color:#fff;
background:# url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPS-AugcmEuZAhlPnzRqmGK1EvbGuhDt8ddn4VueF7g5j0GD7oZPkHtJETjWcLivPlRm7Sg3BOjPLMQ08HzKJFSttZdGZYpeVS78UaJ-jz-HiMp2nNs2XgaIZJhhAX4S_CfHFQEesNeF0/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
</style>

<div id="header">
<h1>ElementaryDownload.blogspot.com</h1>
</div>
<ul id="nav">
<li id="nav-1"><a href="#">Inicio</a></li>
<li id="nav-2"><a href="#">Directorio</a></li>
<li id="nav-3"><a href="#">Contacto</a></li>
<li id="nav-4"><a href="#">Acerca de</a></li>
</ul>

¿Lo ves? No tuviste que entrar a Blogger para probar cómo se ve el menú, con lo cual ya te ahorraste bastante tiempo.
Lo mismo puedes hacer con cualquier otro código que quieras probar como una imagen, una tabla, o hasta el diseño de una página web completa.

0 comentarios:

Publicar un comentario

Related Posts with Thumbnails
Para descargar los pinceles!!! al hacer click se abrira la ventana en algunos casos saldra para descargarlo y todo estara normal, pero si solo aparece la ventana y no ocurre nada solo den enter a la direccion de la nueva ventana y aparecera el cuadro de descarga. Otra solucion es hacer click derecho a la palabra DESCARGAR y dar click a descargar archivo enlazado. Estamos solucionando este desperfecto..GRACIAS MaSTeR