Este asunto esta muy trillado en la red, pero sigue estando vigente y realmente es muy importante que sepamos usarlo y marcarlo correctamente.


No hay día que no vea plantillas que son un laberinto indescifrable, con los códigos mezclados, distribuidos a lo largo de TODA la plantilla, sin señalizar, etc. Todos estos errores ahora se multiplican con los usos de los condicionales y la forma de aligerar la carga de las plantillas.

Esta entrada va dirigida sobre todos a aquellos que os gusta modificar vuestras plantillas, también a quienes diseñan plantillas como un hobby y luego la distribuyen.

No pretendo centrar cátedra con esto, solo explicar como lo suelo hacer(a veces) y porque lo hago así.

1.- Coloca todos los códigos CSS juntos

TODOS los códigos deben estar situados entre <b:skin><![CDATA[ y ]]></b:skin>.

Evita insertarlo en la parte de HTML de tu blog con la etiqueta <style>.Si necesitas aplicar determinados estilos, crea una clase en el CSS y la aplicas al elemento.

NO

<div id='content'>
<style>
#content {
width: 960px;
margin: 10px;
color: #ccc;
...
}
</style>
AQUI CODIGO HTML
</div>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#main-wrapper {
width: 960px;
margin: 10px;
color: #ccc;
...
}
#footer-wrapper {
width: 940px;
margin: 5px;
padding:5px:
...
}
...
</style>
AQUI CODIGO HTML
</b:if>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='expand'>
AQUI CODIGO HTML
</div>
</b:if>

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 ]]></b:skin>".

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.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

7 comentarios:

  1. cometo todos estes e mais outros erros :) preciso, sem dúvida, me disciplinar melhor e organizar os códigos. posso estar enganada mas em 'Señalízalo convenientemente' as imagens me parecem iguais.

    obrigada pelas dicas, abraços!

    ResponderEliminar
  2. vê como sou 'cegueta', acabei de perceber a diferença entre as imagens: /* Posts */
    é por isso que erro tanto!! :D

    ResponderEliminar
  3. Algunas cosas las conocía, otras no.
    Por cierto, algunos estilos al ponerlos en su sitio no funcionan correctamente, supongo que será por entrar en conflicto con otros ¿no?.
    Gracias.

    ResponderEliminar
  4. Fende yo realmente no hablaria de conflictos, si no que no estamos actuando correctamente sobre el elemento...muchas veces la definicion de la clase o propiedad se queda corta...un ejemplo...

    si quiero actuar sobre el enlace de un menu, lo defino asi ............. .menu li...pero a lo mejor necesito actuar asi .menu li a o #menu .menu li a

    Depende de como este estructurado el div y cuantas clases se le aplican...

    ResponderEliminar
  5. Olá Pizcos, conheci seu blog através da Mama e adorei esta postagens com estas dicas. Depois que li percebi que ando comentendo alguns "errinhos".
    Gostaria de tirar uma dúvida: a respeito do que vc falou sobre criar uma class "expand" p/ aplicarmos nas paginas estaticas.
    Qual procedimento vc aconselha se as páginas estáticas não forem criadas pela ferramenta do próprio blogger?Por exemplo, paginas estaticas utilizando o antigo metodo da "gambiarra" (páginas index estaticas)que necessitam esconder alguns elementos, como sidebar, footer etc. No CSS a condicional é aplicada diretamente para a postagem , assim:
    <b:if cond='data:blog.url == &quot;nome-do-post&quot;'><style>
    #blog-pager,#comments,.sidebar,.post-footer{display:none;}
    </style></b:if>
    Pelo q percebi, incluir muitos elementos dessa forma torna o carregamento lento, então gostaria de saber como ocultarmos elementos e fazer com q isso se aplique somente a umas 5 páginas, por exemplo?

    ResponderEliminar
  6. Gothic Darkness, nunca lo he hecho preo intenta esto...

    <div class='expand'>
    <b:if cond='data:blog.url == &quot;nome-do-post&quot;'>
    </b:if>
    <b:if cond='data:blog.url == &quot;nome-do-post2&quot;'>
    </b:if>
    <b:if cond='data:blog.url == &quot;nome-do-post3&quot;'>
    </b:if>
    ...
    </div>

    ResponderEliminar