martes, 11 de mayo de 2010

Como colocar los codigos CSS "HACER UN BLOG"



css11
1.- Coloca todos los códigos CSS juntos

TODOS los códigos deben estar situados entre .

Evita insertarlo en la parte de HTML de tu blog con la etiqueta AQUI CODIGO HTML SI Con añadir a tu CSS
#content { width: 960px; margin: 10px; color: #ccc; ... }
el resultado es el mismo. Veamos como hacerlo con los condicionales de Blogger NO 
AQUI CODIGO HTML
SI Crear una clase (la llamaremos .expand) en tu CSS con las propiedades que quieras definir
.expand #main-wrapper { width: 960px; margin: 10px; color: #ccc; ... } .expand #footer-wrapper { width: 940px; margin: 5px; padding:5px: ... }
Y aplicamos esa clase al elemento en cuestión
AQUI CODIGO HTML
2.- Coloca todo el código relacionado junto Agrupa todo tu código usando el sentido común, todo el código que afecte a un elemento mantenlo junto, no lo disperses. Suele ocurrir que pasado algún tiempo, modificamos o aplicamos un hack a un elemento, los que escribimos sobre como hacerlo, solemos indicar genéricamente "colócalo antes de ]]>". Pero si vas a actuar sobre un elemento de tu entrada (por ejemplo) colócalo allí donde este todo lo relacionado con las entradas. NO 
.post { width: 580px; margin:0 0 10px 0; } .post h3 { margin:10px 0 20px 0; padding:20px 0 40px 4px; font-size:140%; } .post-body { margin:0 0 .75em; padding:0 10px; line-height:1.6em; width: 580px; } #comments-block { width:530px; margin: -30px 0 0 30px; } #comments-block .avatar-comment-indent dd { margin: 0 0 0 30px; } .post-body a:visited { font-style:italic; text-decoration:underline; } #comments-block .avatar-image-container img { border:1px solid #d0cece; padding: 3px; margin:-45px 0 0 20px ; width: 45px; height: 45px; float: none !important; } .post-body blockquote { line-height:1.3em; } .post-footer { margin: .75em 0; }
SI
.post { width: 580px; margin:0 0 10px 0; } .post h3 { margin:10px 0 20px 0; padding:20px 0 40px 4px; font-size:140%; } .post-body { margin:0 0 .75em; padding:0 10px; line-height:1.6em; width: 580px; } .post-body a:visited { font-style:italic; text-decoration:underline; } .post-body blockquote { line-height:1.3em; } .post-footer { margin: .75em 0; } #comments-block { width:530px; margin: -30px 0 0 30px; } #comments-block .avatar-comment-indent dd { margin: 0 0 0 30px; } #comments-block .avatar-image-container img { border:1px solid #d0cece; padding: 3px; margin:-45px 0 0 20px ; width: 45px; height: 45px; float: none !important; }
3.- Señalízalo convenientemente Hay que conocer muy bien la plantilla para recordar cada cosa que se aplica, lo evitaras con una simple indicación NO 
.post { width: 580px; margin:0 0 10px 0; } .post h3 { margin:10px 0 20px 0; padding:20px 0 40px 4px; font-size:140%; } .post-body { margin:0 0 .75em; padding:0 10px; line-height:1.6em; width: 580px; }
SI
/* Posts */ .post { width: 580px; margin:0 0 10px 0; } .post h3 { margin:10px 0 20px 0; padding:20px 0 40px 4px; font-size:140%; } .post-body { margin:0 0 .75em; padding:0 10px; line-height:1.6em; width: 580px; }
4.- Comprueba todo el código sobrante y elimínalo Este es un apartado muy delicado, es fácil decirlo pero ejecutarlo no es tan sencillo, sobre todo si somos principiantes. Os aseguro que mas del 80% del código que agregáis a vuestras plantillas no lo usáis. Existen herramientas online que os hacen esta labor pero no soy muy partidario de recomendarlas, os indicaran todo el CSS sobrante de la URL que les proporcionáis, pero puede que lo estéis usando en otra url (no es lo mismo indicar la url de nuestra pagina principal que una url de una entrada individual). Cuidado con esas cosas. Mi recomendación (poco profesional) es usar el método del borro/compruebo, es decir, cuando lo agreguéis, eliminéis una línea y comprobéis si realmente se usa. así sucesivamente con cada una de ellas. Hay otras formas como usar Firebug en Firefox. 5.- Por ultimo usa el validador de CSS Usar el validador de CSS es importante, no para dejar vuestra hoja de estilo validada, eso es imposible con Blogger, pero si para ver posibles errores como faltas de cierres, propiedades incorrectas, etc.
Un dato, en la lista de errores que os dará, la primera parte corresponde a hojas de estilo que inyecta Blogger y sobre los que no tenemos control.


Realmente creo que todos estos consejos no son tan difíciles de seguir, y nuestras páginas cargaran mas rápido, será más fácil ayudaros y tendréis más fácil entender vuestras plantillas.

0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones