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
Etiquetas: , , , , ,

12 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por LaGrapadora : #

Excelente el blog, solo una observacion, la letra es demasiado pequeña y resulta un poco incómodo leer el codigo html.
Saludos cordiales

11 de julio de 2011, 11:51
Comentario escrito por Pedro Pablo Pachón : #

LaGrapadora: Gracias por su comentario. Tendré en cuenta su observación.
Saludos.

12 de julio de 2011, 4:24
Comentario escrito por Anónimo #

no encontre enl codigo

21 de noviembre de 2011, 6:18
Comentario escrito por Pedro Pablo Pachón : #

Anónimo: Si no encontró el código es porque su plantilla es de las nuevas. Este tutorial es aplicable a plantillas antiguas. Ya implementaremos uno para plantilas nuevas.
Saludos.

25 de noviembre de 2011, 17:42
Comentario escrito por Unknown : #

hola deseo cambiar el sidebar de mi sitio. donde encuentro uno prediseñado?

28 de mayo de 2012, 11:36
Comentario escrito por Unknown : #

Me sirvió a pesar que ya uso la nueva interfaz, quizás el código html de la plantilla sigue siendo el antiguo.. sea como sea conseguí mi propósito.Gracias Pedro.
Saludos

26 de octubre de 2012, 15:42
Comentario escrito por Unknown : #

Sgroya: Pasar de la antigua a la nueva interfaz es cuestión de sentido común que, según veo, a ti te sobra.
Saludos.

27 de octubre de 2012, 12:32
Comentario escrito por Gabriel V. Quevedo : #

¿Cómo ocultar el sidebar para una entrada en particular?. Es decir, que el resto de las entradas conserven el Sidebar, pero particularmente en una, no quiero que aparezca la barra lateral Sidebar

10 de junio de 2013, 23:52
Comentario escrito por Pedro Pablo Pachón : #

Gabriel V.Q.
Desafortunadamente es imposible ocultar o eliminar la sidebar para una sola entrada ya que no hay sino una sidebar para todas las entradas.

Para lograr ese efecto se debería personalizar el blog para darle un formato a cada entrada en particular. En este tutorial se explica el procedimiento:

http://bloguermast.blogspot.com/2012/07/personalizar-blog-de-blogger.html

Saludos.

12 de junio de 2013, 6:28
Comentario escrito por Gabriel V. Quevedo : #

Entendido, y perdona que en este mismo hilo te haga otra pregunta: ¿hay algún enlace que me puedas mostrar, donde se describan los nombres de las variables y sus funciones en las plantillas nuevas?.

Por ejemplo, ahora en tu post, descubro que la variable: se refiere al Sidebar…

pues, como te decía antes: ¿me puedas mostrar un enlace, donde se describan los nombres de las variables y sus funciones para las plantillas nuevas?.

Y muchas gracias por tu explicación anterior…

15 de junio de 2013, 9:40
Comentario escrito por Gabriel V. Quevedo : #

Disculpa, en el comentario anterior olvide colocar la referencia a la variable. Me refería al enlace donde indicas como personalizar el blog, allí vi que: name='main.column.right.width', es el nombre de Sidebar… por eso te pedía una referencia sobre nombre y funciones del resto, en la plantillas nuevas.

15 de junio de 2013, 9:47
Comentario escrito por Pedro Pablo Pachón : #

Gabriel, localiza, al comienzo de la plantilla, esta línea:

<b:skin>...</b:skin>

...haces click en la flecha que está a la izquierda y se desplegarán todas las variables.

Saludos.

18 de junio de 2013, 14:10

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.

Suscribirse a: Enviar comentarios ( Atom )