lunes, 23 de enero de 2012

Editar la apariencia en las páginas estáticas de Blogger

Hace algunos días me han preguntado como conseguí darle otra apariencia a algunas páginas estáticas como el buscador o al mapa de sitio, en esta entrada veremos cómo llevar esta acción a cabo de 2 formas distintas.



La primera forma consta en editar TODAS las páginas estáticas, mientras que la segunda permite editar la páginas estáticas de forma individual. Como todas las necesidades son distintas, no puedo dar un veredicto y decir qué forma es mejor, aunque recomiendo que los cambios no sean aplicados directamente a la plantilla (Es decir, el método de edición independiente considero como el más apropiado).

El tutorial:
Método 1: Añadiendo CSS dentro de la plantilla (Para aplicar los cambios a todas las páginas estáticas):

En"Diseño | Edición HTML", deberás buscar algún sitio en donde insertar la nueva hoja de estilos, recomiendo que los cambios sean hechos debajo del siguiente código:
<body>
Debajo de éste deberás usar una condicionante de tipo "static_page", junto con la etiqueta </style>:
<b:if cond='data:blog.pageType == "static_page"'>
    <style type="text/css">

     /*ATRIBUTOS NUEVOS*/

   </style>
</b:if>

En donde deberás aplicar CSS para poder cambiar los estilos. Por ejemplo, si deseas ocultar la sidebar, deberás hacerlo con el siguiente código:
<b:if cond='data:blog.pageType == "static_page"'>
    <style type="text/css">
      #sidebar-wrapper {display:none;}
   </style>
</b:if>

Y si desearas aumentar el ancho de las entradas, entonces deberías incluir los siguientes atributos junto con el anterior:

<b:if cond='data:blog.pageType == "static_page"'>
    <style type="text/css">
      #sidebar-wrapper {display:none;}
      #main-wrapper {width:940px;}
      #main {width:100%;}
      .post {width:90%;}
   </style>
</b:if>

En donde deberías reemplazar valor "width:940px;", el cual corresponde la ancho, por alguno que consideres apropiado (Los posts tomarían el 90% del tamaño que habrás asignado, ya que los píxeles se aplicarán al contenedor padre).

Método 2: Añadiendo CSS directamente en el cuerpo de la página estática (Para editarlas de forma individual):

Para aplicar CSS directamente al cuerpo de la página es necesario ir a "Edición de HTML" en nuestro editor de entradas, y en él aplicar los atributos mediante el siguiente código:
 <style type="text/css">

     /*ATRIBUTOS NUEVOS*/

</style>
Recuerda que con este método no sobrecargas la plantilla del blog, y además puedes editar las páginas estáticas y ver el resultado con el botón "Vista Previa", con el método 1 deberás guardar los cambios y previsualizar una página constantemente.

No hay comentarios:

Publicar un comentario