Como colocar los codigos CSS «HACER UN BLOG»

  • mayo 11, 2010



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 SICon 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.

No Comments Found