Mostrando entradas con la etiqueta ocultar sidebar. Mostrar todas las entradas
Mostrando entradas con la etiqueta ocultar sidebar. Mostrar todas las entradas

28.3.13

Ocultar o eliminar sidebar de Blogger



Ocultar sidebar en plantillas antiguas

Para ocultar la sidebar de nuestro blog de blogger:

1.- Vamos a Editar HTML:

Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

#sidebar-wrap {
  width:240px;
  float:$endSide;
  margin:15px 0 0;
  font-size:97%;
  line-height:1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

3.- Agregamos las líneas resaltadas:

#sidebar-wrap {
   visibility: hidden;
  display: none;
   width:240px;
  float:$endSide;
  margin:15px 0 0;
  font-size:97%;
  line-height:1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

4.- Guardamos los cambios.

 

Eliminar sidebar en plantillas antiguas

Si lo que queremos es eliminar la sidebar:

1.- Eliminamos el código indicado en el punto 2, del párrafo anterior.
2.- Localizamos y eliminamos el siguiente código:

  <div id='sidebar-wrap'>

    <div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
      <b:section class='sidebar' id='sidebartop'/>
    </div></div>

    <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
      <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div></div>

  <div id='footer-wrap1'><div id='footer-wrap2'>
    <b:section class='footer' id='footer'/>
  </div></div>

</div>

Eliminando la sidebar obviamente quedará vacío el espacio que ocupaba. Para llenarlo tendremos que aumentar el ancho del cuerpo de las entradas. Para eso localizamos el siguiente código:

#main-wrapper {
  width: 630px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

...y en width: 630px aumentamos el número de pixeles hasta lograr el ancho del blog.

3.- Guardamos la plantilla.


Eliminar sidebar en plantillas nuevas

Para eliminar la sidebar en plantillas nuevas:

1.- Eliminamos los gadgets que tengamos en la sidebar.

2.- Vamos a Editar HTML:

Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

3.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

<b:template-skin>
      <b:variable default='960px' name='content.width' type='length'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='310px' name='main.column.right.width' type='length'/>

4.- en la última línea cambiamos 310px por 0px

5.- Guardamos plantilla.

Tema relacionado:Ocultar, mostrar sidebar
Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera
1 comentarios
Etiquetas: , , , , ,

19.5.12

Ocultar sidebar con páginas estáticas


Podemos lograr el efecto de que al acceder a una página estática, ésta ocupe todo el ancho del blog y, obviamente, la sidebar quede oculta, así:


Para plantillas clásicas (antiguas)
  • Vamos a Editar HTML:
Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►
    ...y localizamos, poniendo una línea del mismo dentro del rectángulo de búsqueda (Search), el código en donde está el ancho del outer-wrapper, que es el ancho del blog. Este código varía según la plantilla. Por ejemplo, en la plantilla Mínima es éste:
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  align:$startSide;
  font: $bodyfont;
  }

    ...y en la plantilla Denim, éste:
#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}
  • Conociendo el ancho del outer-wrapper localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
display:none;
visibility:hidden;
}
#main-wrapper {
width: XXXpx;
}
</style>
</b:if>
    En width: XXXpx; reemplazamos las X por el número de pixeles correspondiente al ancho del outer-wraper que, en los ejemplos, debe ser igual en la plantilla Mínima, y 30 pixeles menos (730px), en la plantilla Denim.
  • Guardamos los cambios
Ingresando a la página estática podremos ver que ésta ocupa todo el ancho del blog ocultando la sidebar. Si el ancho de la página excede al ancho del blog regresamos a la plantilla y disminuímos el número de pixeles que pusimos en el main-wapper del código que agregamos, o lo aumentamos si el caso es a la inversa. Veamos la página en funcionamiento:

Ocultar sidebar página estática

 

Para plantillas nuevas (Diseñador de plantillas)
  • Vamos a Editar HTML:
Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►
  • Para averiguar el ancho del blog localizamos, poniendo una parte de la misma dentro del rectángulo de búsqueda (Search), la siguiente línea:
<b:variable default='960px' name='content.width' type='length' value='960px'/>
    ...con esto sabemos que el ancho del blog es de 960px. En todo caso, si los dos valores contenidos en la anterior línea son diferentes, tendremos en cuenta el segundo (value='960px').
  • Localizamos esta línea:
<div class='column-left-outer'>
  • la eliminamos y la reemplazamos con ésta:
<div class='column-left-outer' id='sidebar-left'>
  • Localizamos esta línea:
<div class='column-right-outer'>
  • La eliminamos y la reemplazamos con ésta:
<div class='column-right-outer' id='sidebar-right'>
  • Localizamos la etiqueta </head>, y antes de la misma pegamos el siguiente código:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-left {
display: none;
visibility: hidden;
}
#sidebar-right {
display: none;
visibility: hidden;
}
#main {
width: 900px;
margin-left: -155px;
}
</style>
</b:if>
    ...en donde ponemos el ancho (width) del blog menos 60px, o sea 900px, si el blog tiene sidebar izquierda y derecha, o el ancho del blog, 960px, si tiene únicamente sidebar derecha. La línea resaltada en amarillo la dejamos si el blog tiene una sidebar izquierda; si no la tiene la eliminamos. Si tiene sidebar izquierda averiguamos su ancho localizando este código:
<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
    ...en el que podemos observar que el ancho de esa sidebar es de 180px, le restamos 25px y ese valor (-155px) precedido del signo menos (-) es el que ponemos en la línea resaltada en amarillo.
  • Guardamos los cambios.
Nota: Los anchos tanto del main-wrapper como de las sidebar pueden variar, según las plantillas. Debemos variar también las modificaciones, guardando las proporciones.

Veamos las páginas en funcionamiento:

Con una sidebar: Ocultar sidebar página estática Con dos sidebar: Ocultar sidebar página estática
23 comentarios
Etiquetas: , , ,

16.10.11

Ocultar, mostrar sidebar en Blogger



Una interesante alternativa para los lectores de nuestro blog es que puedan mostrar y ocultar la barra lateral (Sidebar), a voluntad. Este efecto se puede lograr fácilmente, así (Únicamente para plantillas antiguas):

Tomamos como referencia la plantilla Mínima original:

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

...y localizamos el siguiente código poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

El anterior codigo no lo vamos a modificar. Sencillamente vamos a observar en él las medidas de nuestro blog:
  1. El primer bloque, #outer-wrapper, nos indica el ancho del blog, que es de 660px.
  2. El segundo bloque, #main-wrapper, nos indica el ancho de las entradas, que es de 410px.
  3. El tercer bloque, #sidebar-wrapper, nos indica el ancho de la sidebar, que es de 220px.
Para lograr nuestro objetivo debemos darle al #main-wrapper, ancho de las entradas, dos alternativas:
  1. Que adquiera el ancho total del blog (660px) y de esta manera impida ver la sidebar, y
  2. que vuelva a su ancho normal (410px), y permita ver la sidebar.
Para lograr lo anterior vamos a Diseño ► Diseño, añadimos, debajo de la cabecera del blog, un gadget del tipo HTML/Javasript, en el cual pegamos el siguiente código:

<center>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='660px';">Ocultar Sidebar</a> -
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'">Mostrar Sidebar</a>
</center>

Como podemos observar el anterior código contiene tanto el ancho del blog (660px), como el ancho del cuerpo de las entradas (410px), que debemos cambiar por las medidas de nuestro blog. Veamos este efecto en funcionamiento:

Ocultar sidebar
2 comentarios
Etiquetas: , ,

26.1.10

Ocultar o eliminar barra lateral (Sidebar) de blogger


Ocultar barra lateral (Sidebar) en plantillas antiguas

Para ocultar la barra lateral (Sidebar) de nuestro blog de blogger:

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos, poniendo una línea del mismo dentro del rectángulo de búsqueda (Search), el siguiente código:

#sidebar-wrap {
  width:240px;
  float:$endSide;
  margin:15px 0 0;
  font-size:97%;
  line-height:1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

3.- Agregamos las líneas resaltadas:

#sidebar-wrap {
   visibility: hidden;
  display: none;
   width:240px;
  float:$endSide;
  margin:15px 0 0;
  font-size:97%;
  line-height:1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

4.- Guardamos los cambios.

 

Eliminar barra lateral (Sidebar) en plantillas antiguas

Si lo que queremos es eliminar la barra lateral (Sidebar):

1.- Eliminamos el código indicado en el punto 2, del párrafo anterior.
2.- Localizamos y eliminamos el siguiente código:


  <div id='sidebar-wrap'>

    <div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
      <b:section class='sidebar' id='sidebartop'/>
    </div></div>

    <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
      <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div></div>

  <div id='footer-wrap1'><div id='footer-wrap2'>
    <b:section class='footer' id='footer'/>
  </div></div>

</div>

Eliminando la sidebar obviamente quedará vacío el espacio que ocupaba. Para llenarlo tendremos que aumentar el ancho del cuerpo de las entradas. Para eso localizamos el siguiente código:

#main-wrapper {
  width: 630px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

...y en width: 630px aumentamos el número de pixeles hasta lograr el ancho del blog.

3.- Guardamos la plantilla.


Eliminar sidebar en plantillas nuevas

Para eliminar la sidebar en plantillas nuevas:

1.- Eliminamos los gadgets que tengamos en la sidebar.

2.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

3.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

<b:template-skin>
      <b:variable default='960px' name='content.width' type='length'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='310px' name='main.column.right.width' type='length'/>

4.- en la última línea cambiamos 310px por 0px

5.- Guardamos plantilla.

Tema relacionado:Ocultar, mostrar sidebar

Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera
12 comentarios
Etiquetas: , , , , ,
Suscribirse a: Entradas ( Atom )