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 :

▼▲ 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

Comentario escrito por Pedro Pablo : #

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

Comentario escrito por Anónimo #

no encontre enl codigo

Comentario escrito por Pedro Pablo : #

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.

Comentario escrito por Carlos Arteaga : #

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

Comentario escrito por Sgroya : #

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

Comentario escrito por  Pedro Pablo : #

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.

Comentario escrito por Gabriel V.Q. : #

¿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

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.

Comentario escrito por Gabriel V.Q. : #

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…

Comentario escrito por Gabriel V.Q. : #

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.

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.

Publicar un comentario en la entrada