Espera unos segundos se esta Cargando...

Ampliar las entradas y ocultar la sidebar en las páginas estáticas

13 de diciembre de 2014


En esta entrada mostrare como lograr que las entradas independientes o páginas estáticas tengan un ancho mucho mayor al de las entradas normales y que la sidebar (barra lateral) se oculte.Ver ejemplo aquí.


Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar


</head>


Encima añade este bloque:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper {
float: center;
width: 1000px;
}
#sidebar-wrapper {
visibility: hidden;
display: none;
 width: 0px;
}
</style>
</b:if>


El main-wrapper (la zona de las entradas) tendrá un ancho de 1000 píxeles.

La barra lateral (sidebar-wrapper) estará oculta (visibility: hidden; display: none;) y con un ancho de 0 píxeles (width: 0px;).

Guarda la plantilla para terminar.








-8 comentarios-

  1. muchas gracias!!!!

    ResponderEliminar
  2. Hola buenas ¿y si quisiera hacer lo mismo, pero en lugar de páginas estáticas, fuera en las entradas normales? Es decir, que mientras se navegue por el resto del blog - página principal, búsqueda, etiquetas - se viera todo con normalidad, mostrando el/las sidebar, pero que cuando se entrase en una entrada normal, se ocultaran las sidebars y la entrada se agrandase tomando el ancho total del cuerpo. He visto muchos blogs que lo hacen y sinceramente queda estupendamente con todo el ancho para la entrada.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Buenas otra vez,

      Ya he conseguido lo que preguntaba. De hecho es justo lo que quería. Para el que le interese les dejo el código:

      < b:if cond='data:blog.pageType == "item"'>
      < style>
      .main-inner .columns {
      padding-left: 0px !important;
      padding-right: 0px !important;
      }
      .main-inner .fauxcolumn-center-outer {
      left: 0px !important;
      right: 0px !important;
      }
      .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
      display: none !important;
      }
      < /style>
      < /b:if>

      Quitad el espacio y listo.

      En un blog que tengo de pruebas podéis observarlo en funcionamiento. Entrad en cualquier entrada y listo.

      www.elmitodelalquimista.blogspot.com

      Un saludo y gracias, me han venido de perlas varias cosas de aquí, sobre todo el poder poner iconos en las etiquetas, autor y similar.

      Eliminar
    5. Y perdón por tanto comentario eliminado, Google borraba los códigos o los implementaba...

      Eliminar
    6. Alejandro ¿Se coloca antes que el Head?

      Eliminar

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger