Mostrando entradas con la etiqueta sidebar. Mostrar todas las entradas
Mostrando entradas con la etiqueta 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: , , , , ,

Cambiar de lugar la sidebar de Blogger



Índice
Para plantillas nuevas (del Diseñador)
Para plantillas Denim
Para plantillas Rounders
Para plantillas Minima
Para plantillas Herbert
Para plantillas Harbor
0 comentarios
Etiquetas: , , ,

19.1.13

Cambiar de lugar la sidebar en plantillas del Diseñador


Los blogs diseñados con las plantillas del Diseñador tienen la sidebar en el lado derecho. A continuación veremos cómo pasarla para el lado izquierdo.

Vamos a Editar HTML:

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

Localizamos uno de los siguientes códigos poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

1º

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

2º

    <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'/>

Si encontramos el primer código lo cambiamos por éste:

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

Si encontramos el segundo código lo cambiamos por éste:

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

Los resaltados en rojo y amarillo son las propiedades del código original que hemos modificado, y sus modificaciones, respectivamente.

Guardamos plantilla y buscamos uno de los siguientes pares de códigos:

1º

        <div class='column-left-outer'>
        <div class='column-left-inner'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='0'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

        <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

2º

        <div class='column-left-outer'>
        <div class='column-left-inner'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

        <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

Si encontramos el primer par cambiamos:

            <macro:param default='0' name='num' value='0'/>

...por:

            <macro:param default='2' name='num' value='1'/>

...y viceversa.

Si encontramos el segundo par cambiamos:

            <macro:param default='0' name='num'/>

...por:

            <macro:param default='2' name='num'/>

...y viceversa

Guardamos plantilla, vamos a:

Página principal ► Diseño ► Plantilla ► Personalizar ► Diseñador ► Ajustar ancho

...y podremos observar que la sidebar que antes estaba en el lado derecho:

Sidebar derecha en el diseñador

..ahora está en el lado izquierdo:

Sidebar izquierda en el diseñador
2 comentarios
Etiquetas: , , , ,

1.1.13

Cambiar de sitio la sidebar, plantillas antiguas



Índice
Para plantillas Denim
Para plantillas Rounders
Para plantillas Minima
Para plantillas Herbert
Para plantillas Harbor
0 comentarios
Etiquetas: , , , ,

21.7.12

Personalizar sidebar Blogger


Una manera de personalizar la sidebar es poniéndole un color de fondo, y asignando algunas propiedades a ésta y los gadgets contenidos en la misma.


Plantillas antiguas

1.- Utilizando como referencia la plantilla Mínima, 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-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 */
}

3.- Le agregamos las siguientes líneas:

border: 0px solid; /* Grosor del borde */
border-color: #XXXXXX; /* Color del borde */
background: #XXXXXX; /* Color del fondo */
    Debiendo quedar así:
#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 */
  border: 0px solid; /* Grosor del borde */
  border-color: #XXXXXX; /* Color del borde */
  background: #XXXXXX; /* Color del fondo */
}
    Para ponerle borde a la sidebar, en 0px cambiamos el 0 por 1, por ejemplo. Las X las cambiamos por los números de los códigos de los colores correspondientes. Si queremos la sidebar sin borde agregamos únicamente la última línea (color del fondo).

4.- Identificamos los gadgets que tenemos en la sidebar (ver: Personalización individual) y pegamos, antes de la etiqueta   ]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo utilizado para la demo, son los siguientes:

#BlogArchive1 { /* Identificación del gadget */
  margin: 5px; /*Margen en relac. con el borde de la sidebar y entre gadgets */
  border: 1px solid; /* Bordes del gadget */
  padding: 5px; /* Espacio entre el contenido y el borde del gadget */
  border-color: #012790; /* Color de los bordes del gadget */
}

#Text1 {
  margin: 5px;
  border: 1px solid;
  padding: 5px;
  border-color: #012790;
}

#Image1 {
  margin: 5px;
  border: 1px solid;
  padding: 5px;
  border-color: #012790;
}

#NewsBar1 {
  margin: 5px;
  border: 1px solid;
  padding: 5px;
  border-color: #012790;
}

#Attribution1 {
  margin: 5px;
  border: 1px solid;
  padding: 5px;
  border-color: #012790;
    Los valores para las propiedades de los gadgets deben ser iguales, para guardar uniformidad.
Nota: Es posible que los caracteres de los textos de la sidebar no sean bien notorios porque el color, por defecto de los mismos, sea similar al que le dimos al fondo de la sidebar. En ese caso, como ocurrió con el ejemplo utilizado para la demo, tendremos que cambiar, con el Diseñador de plantillas, el color del texto, el de los enlaces y el de los títulos de la sidebar, por uno que contraste con el que le dimos al fondo.

5.- Vista previa ► Guardar plantilla.

Personalizar sidebar plantilla Mínima
En este tutorial se tratan diferentes formas de personalizar los gadgets de la sidebar: Personalizar gadgets.


Plantillas nuevas

1.- Utilizando como referencia la plantilla Simple, 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:

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}
    Y lo cambiamos por éste:
.fauxcolumn-right-outer .fauxcolumn-inner {
  border: 2px solid; /* Grosor del borde */
  height: 650px; /* Altura de la sidebar */
  border-color: #0F5C76; /* Color del borde */
  background: #9ECCDF; /* Color del fondo de la sidebar */
}
    Los valores los cambiamos por los que se ajusten al diseño de nuestra plantilla.
3.- Identificamos los gadgets que tenemos en la sidebar (ver: Personalización individual) y pegamos, antes de la etiqueta   ]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo que veremos más adelante, son los siguientes:

#Image1 {
  margin: 5px; */ Margen o espacio entre gadgets */
  border: 1px dashed; */ Bordes punteados */
  padding: 5px; */ Espacio entre el contenido y los bordes */
  border-color: #012790; */ Color de los bordes */
}

#Followers1 {
  margin: 5px;
  border: 1px dashed;
  padding: 5px;
  border-color: #012790;
}

#BlogArchive1 {
  margin: 5px;
  border: 1px dashed;
  padding: 5px;
  border-color: #012790;
}

#Profile1 {
  margin: 5px;
  border: 1px dashed;
  padding: 5px;
  border-color: #012790;
}
    Asignamos a todos los gadgets las mismas propiedades. Si no queremos los bordes punteados, cambiamos dashed por solid
4.- Vista previa ► Guardar plantilla.

Personalizar sidebar plantilla Simple
14 comentarios
Etiquetas: , , , , ,

5.7.12

Ocultar, cambiar fondo sidebar plantilla Travel



El fondo de la sidebar de la plantilla Travel puede ser ocultado y cambiado.

Vamos a Editar HTML:

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

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

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

1.- Para ocultar el fondo de la sidebar le agregamos, al anterior código, la siguiente línea:

visibility: hidden;

...debiendo ese código quedar así:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
  visibility: hidden;
}

2.- Para cambiar el fondo de la sidebar, en el mismo código indicado en el punto uno:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

...cambiamos el segmento resaltado por éste:

url("aquí la URL de la imagen")

...debiendo el código quedar así:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: url("aquí la URL de la imagen") repeat scroll top left;
}

La imagen deberá tener el mismo ancho de la sidebar (310px).


6 comentarios
Etiquetas: , , , , , ,

26.6.12

Reducir espacio entre entradas y sidebar


El espacio entre las entradas y la sidebar de Blogger puede parecernos, en algunas plantillas, exagerado. Podemos reducir ese espacio, en las plantillas nuevas (Diseñador de plantillas), utilizando uno de estos procedimientos:

1.- Ensanchando el cuerpo de las entradas, o
2.- Ensanchando la sidebar.

En todos los casos vamos a Editar HTML:

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

...y hacemos la modificaciones indicadas en cada caso localizando los códigos correspondientes poniendo, dentro del rectángulo de búsqueda (search), una línea de los mismos.

Los márgenes entre entradas y sidebars son, por defecto, iguales a cero. Entonces para reducir esos espacios debemos poner márgenes con cifras negativas al cuerpo de las entradas o a la sidebar (una sola de estas dos alternativas). A medida que aumentemos el valor absoluto de esas cifras negativas, el margen se reducirá más, y viceversa.


Plantilla Simple

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
  margin-right: -30px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Inmediatamente antes de:

/* Posts
----------------------------------------------- */

...pegamos este código:

/* Sidebar
----------------------------------------------- */
.main-inner .column-right-inner {
  padding: 0 $(main.padding);
  margin-left: -30px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Picture Window

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0 0;
}

...y lo reeemplazamos con éste:

.main-inner .column-center-inner {
  padding: 0 0;
  margin-right: -20px;  /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Eliminamos el siguiente código:

.main-inner .column-right-inner {
  padding-right: 0;
}

...y lo reemplazamos con éste:

.main-inner .column-right-inner {
  padding-right: 0;
  margin-left: -20px; /* Margen izquierdo dado a la sidebar */
}


Plantillas Fantástico S.A. (Awesome inc.) y Filigrana (Watermark)

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
margin-right: -30px; /* Margen derecho dado al cuerpo de las entradas */
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}


Ensanchando la sidebar:

Eliminamos el siguiente código:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
  margin-left: -30px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Etéreo

Ensanchando el cuerpo de las entradas:

Después de:

.content-inner {
  padding: 0;
}

...pegamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0;
  margin-right: -10px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Después de:

.content-inner {
  padding: 0;
}

...pegamos el siguiente código:

.main-inner .column-right-inner {
  padding: 0;
  margin-left: -20px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Travel

Ensanchando cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
  margin-right: -25px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Para reducir el espacio entre las entradas y la sidebar, en la plantilla Travel, empleando el método de ensanchar la sidebar, debemos tener en cuenta que tanto la entrada como la sidebar tienen un mismo fondo y, además la sidebar, dentro de éste, tiene otro fondo. Tendremos, entonces, que ensanchar el fondo de la sidebar y, en esa misma proporción, darle un margen negativo al cuerpo de las entradas, para que conserve su ancho original, ya que será desplazada por la sidebar en una dimensión igual al ancho que se le dé a ésta. Esto lo lograremos así:

En el siguiente código:

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

...modificamos la cifra resaltada, pasándola de 310px a 335px, ensanchando así el fondo de la sidebar en 25px.

Y para darle al cuerpo de las entradas su ancho original eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
  margin-right: -25px; /* Margen derecho dado al cuerpo de las entradas */
}


Abramos las ventanas y comparemos:

Blog-plantilla Travel con el espacio entre entradas y sidebar original: aquí

Blog-plantilla Travel con el espacio entre entradas y sidebar reducido ensanchando cuerpo de las entradas: aquí

Blog-plantilla Travel con el espacio entre entradas y sidebar reducido ensanchando la sidebar: aquí

2 comentarios
Etiquetas: , , , , ,

21.6.12

Sidebar fija para plantillas nuevas


Para fijar la sidebar en plantillas nuevas (Diseñador de plantillas) vamos a utilizar como modelos la Awesome inc. (Fantástico S.A.) y la Simple.


Sidebar fija para plantilla Awesome Inc.

Sidebar fija para plantillas nuevas
1.- Vamos a Editar HTML:

Diseño ► Plantilla ► 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:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0 5px;
}

...lo eliminamos y en su lugar pegamos éste:

.main-inner .column-center-inner {
}
.main-inner .column-left-inner {
}
.main-inner .column-right-inner {
  padding: 0 5px;
  margin-top: -90px; /*Margen superior*/
  width: 310px; /*Ancho de la sidebar*/
  position: fixed; /*Para fijar la sidebar*/
}
Los comentarios resaltados en rojo son informativos y se pueden eliminar.

Con el anterior código, además de fijarla, estamos asignando a la sidebar un margen superior en número negativo para que llegue hasta el tope superior, y un ancho de 310px. Para subir o bajar la sidebar aumentamos o disminuimos el margen superior.

3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así:

Localizamos el siguiente código

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
  width: 600px; /*Ancho asignado a la cabecera*/
}
El comentario resaltado en rojo es informativo y se puede eliminar.

4.- Vista previa y Guardar plantilla


Sidebar fija para plantilla Simple

Sidebar fija para plantillas nuevas
1.- Vamos a Editar HTML:

Diseño ► Plantilla ► 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:

.main-inner .column-right-outer {
  width: $(main.column.right.width);
  margin-right: -$(main.column.right.width);
}

...lo eliminamos y, en su lugar, pegamos éste:

.main-inner .column-right-inner {
  padding: 0 5px;
  margin-top: -90px; /*Margen superior*/
  width: 310px; /*Ancho de la sidebar*/
  position: fixed; /*Para fijar la sidebar*/
}
Los comentarios resaltados en rojo son informativos y se pueden eliminar.

Con el anterior código, además de fijarla, estamos asignando a la sidebar un margen superior en número negativo para que llegue hasta el tope superior, y un ancho de 310px. Para subir o bajar la sidebar aumentamos o disminuimos el margen superior.

3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así:

Localizamos el siguiente código

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;

...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
width: 610px; /*Ancho de la cabecera*/
}
El comentario resaltado en rojo es informativo y se puede eliminar.

4.- Vista previa y Guardar plantilla

Vea: Sidebar fija para plantillas antiguas.

19 comentarios
Etiquetas: , , , , ,

15.6.12

Sidebar fija para plantillas antiguas


Podemos hacer que la sidebar de nuestro blog quede fija. Tomaremos como referencia la plantilla Mínima, procedimiento que, tomado como modelo, podremos aplicar a otras plantillas antiguas.

Sidebar fija para plantillas antiguas
1.- Vamos a Editar HTML:

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

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

#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 */
}


Este código no está asignando a la sidebar márgenes superior (up) ni izquierdo (left), que serán necesarios por lo que se explica más adelante. Entonces lo eliminamos y lo reemplazamos por el siguiente:

#sidebar-wrapper {
  margin-top: -185px; /*Margen superior*/
  margin-left: 440px; /*Margen izquierdo*/
  position: fixed; /*para fijar la sidebar*/
  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 */
}
(Los comentarios resaltados en rojo son informativos y se pueden eliminar)

Con esta modificación hemos dado a la sidebar:
  • Un margen superior en número negativo, para que sobrepase la cabecera y llegue hasta el tope superior, y
  • Un margen izquierdo suficiente para que se ubique al lado derecho de las entradas, ocupando su lugar original, ya que, al ponerla fija, se desplaza hacia la izquierda, quedando sobre las entradas.

    Si queremos subir o bajar más la sidebar aumentamos o disminuimos el valor absoluto de la cifra negativa que le pusimos al margen superior (-185px).
3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así: Localizamos el código correspodiente a la envoltura de la cabecera:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Lo eliminamos y lo reemplazamos por éste:

#header-wrapper {
  width:405px; /*Ancho de la cabecera*/
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  margin-left:0px; /*Margen izquierdo de la cabecera*/
  }
(Los comentarios resaltados en rojo se pueden eliminar)

Con esta modificación hemos reducido el ancho de la cabecera dejándolo igual al ancho del cuerpo de las entradas, y le hemos dado un margen izquierdo de cero para que se ubique a ese costado.

4.- Vista previa y Guardar plantilla

Vea: Sidebar fija para plantillas nuevas.

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

11.4.12

Personalizar blog de Blogger


Este tutorial fue actualizado. Ver actualización.

Podemos personalizar nuestro blog acabando con la monotonía de que en todas las entradas aparezca la misma sidebar, y dándole la apariencia característica de una página web cualquiera.

Este tutorial pueden aplicarlo, preferiblemente, quienes van a crear un blog nuevo. La razón es la siguiente: para lograr el objetivo propuesto tendremos que trabajar con tablas, y, para trabajar con tablas, es conveniente activar la opción NO en Convertir saltos de línea:

Configuración ► Formato ► Convertir saltos de línea:
Acceso a Formato Convertir saltos de línea

Si hacemos esta modificación en un blog ya creado (que normalmente se hace con la opción mencionada activada en SI), se nos van a desconfigurar todas las entradas, pues los textos nos quedarán sin saltos de línea.

En el blog nuevo tendremos que crear las entradas únicamente en el editor de HTML e introducir los saltos de línea con una etiqueta <br />, para retornos forzados simples y, con dos etiquetas <br /> <br />, para retornos forzados dobles.

Nota: Con la Nueva Interfaz de Blogger ya podemos configurar los saltos de línea en cada entrada, individualmente. Ver: Saltos de línea en Nueva Interfaz de Blogger.

Para que la personalización de nuestro blog sea completa debemos crear la Portada o Página de inicio, teniendo en cuenta que debe tener el ancho del blog, ya que, como veremos adelante, vamos a eliminar la sidebar. Para crear dicha portada éste es el tutorial: Crear Portada o Página de inicio.

Hechas las anteriores aclaraciones, vamos a personalizar nuestro blog recién creado:

1.- Vamos a Elementos de página y podremos observar, en la sección correspondiente a la sidebar, los elementos correspondientes a los gadgets que están en el blog por defecto (Seguidores, Archivo del blog, Datos personales, Attribution):

    ...en cada uno de ellos hacemos click en Editar, para acceder a los mismos, eliminarlos, y de esta manera dejar vacía la sidebar. Sin embargo estos gadgets seguirán disponibles para agregarlos, no ya en la sidebar, porque vamos a eliminarla. En los blogs diseñados con plantillas nuevas el gadget Attribution aparece debajo de las entradas, y sin la opción para eliminarlo. Para activar esa opción localizamos en la plantillla esta línea:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

2.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML
Acceso a Edición de HTML

Hasta aquí el procedimiento es igual tanto para plantillas antiguas como para las nuevas. A continuación veremos cada caso en particular:

Para plantillas antiguas (Plantilla de referencia: Mínima)

1.- Localizamos y eliminamos el siguiente código:

#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 */
}
    De esta manera hemos eliminado la sidebar.

2.- Ahora debemos ocupar el espacio dejado por la sidebar, ya eliminada. Localizamos el siguiente código:

/* 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 */
  }
    Cambiamos el ancho del main-wrapper (envoltura o contenedor de las entradas), aumentándolo de 410px a 660px, dejándolo así con un ancho igual al del outer wrapper (envoltura exterior del blog), que es 660px. Con esta modificación las entradas ocuparán todo el ancho del blog.

Para plantillas nuevas

1.- Localizamos el siguiente código:

    <b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='860px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

2.- Modificamos las cifras resaltadas, debiendo el código quedar así:

    <b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='860px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='0' name='main.column.right.width' type='length' value='0'/>
    Con la anterior modificación hemos eliminado la sidebar y si vamos a Diseño ► Diseñador de plantillas ► Ajustar ancho, veremos que contamos únicamente con la opción para ajustar el ancho del blog completo:
Opción Ajustar ancho, sin sidebar

Conclusión

La personalización de un blog como se explicó en este tutorial tiene la ventaja que cada entrada puede tener su sidebar, cuyo contenido sea relacionado con el tema de la entrada. Lo que no ocurre con el blog tradicional, en el que en todas las entradas aparece la misma sidebar. Podemos, así mismo, crear las entradas con un único cuerpo, sin sidebar.

Damos, a continuación, algunos ejemplos de códigos para crear entradas personalizadas:

1.- Entrada simple: entrada sin formato especial, no lleva tablas, por consiguiente no necesita ningún código para formato. La creamos como una entrada normal (en el editor de HTML, y utilizando etiquetas <br />, para introducir los saltos de línea, como se explicó al comienzo de este tutorial.

Entrada simple 2.- Entrada con sidebar derecha: Configuramos un formato para dividir la entrada en dos secciones, una será el cuerpo de la entrada, y la otra será una especie de sidebar. Para lograr este objetivo ponemos en la entrada (Edición de HTML) tres tablas anidadas, así:
    A una, la principal, que contendrá a las otras dos, le damos el ancho del blog, que es de 660px. A la segunda le damos el ancho que tenía el cuerpo de las entradas, o sea 410px, y en ella pondremos el contenido de las entradas. Y a la tercera, la sidebar, le damos un ancho de 240px, y en ella pondremos, por ejemplo, menús, enlaces, imágenes, videos, etc. El siguiente es el código que debemos poner en las entradas que vamos a crear con este formato:
<table border="0" cellspacing="0" cellpadding="0" width="660px">
<tbody>
<tr>
<td>
   <table border="0" cellspacing="0" cellpadding="0" width="410px" align="left">
   <tbody>
   <tr>
   <td>
      Contenido de la entrada
   </td>
   </tr>
   </tbody>
   </table>
   <table border="0" cellspacing="0"cellpadding="0" width="240px" align="right">
   <tbody>
   <tr>
   <td>
      Contenido de la sidebar
   </td>
   </tr>
   </tbody>
   </table>    
</td>
</tr>
</tbody>
</table>

Debemos ser cuidadosos al aplicar los anchos a las tablas, para que la suma de las interiores no exceda el ancho de la principal, ni ésta exceda el ancho del blog. Así se verán las entradas creadas con este formato:

Entrada con sidebar derecha

3.- Entrada con sidebar izquierda: Utilizamos el mismo código anterior (punto 2), con esta modificación: En donde está left ponemos right, y viceversa:

Entrada con sidebar izquierda

4.- Entrada con sidebar derecha color de fondo diferente: Con este formato lo que hacemos es ponerle a la sidebar un color diferenta al del blog. Las medidas son diferentes a las de los formatos enteriores, porque esta entrada la vamos a crear en un blog diseñado con la plantilla Awesone, que es más ancha que la Mínima. El siguiente es el código:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>
   <table border="0" cellspacing="0" cellpadding="0" width="590px" align="left">
   <tbody>
   <tr>
   <td>
      Contenido de la entrada
   </td>
   </tr>
   </tbody>
   </table>
   <table border="0" cellspacing="0"cellpadding="0" width="260px" align="right" bgcolor="#463636">
   <tbody>
   <tr>
   <td>
      Contenido de la sidebar
   </td>
   </tr>
   </tbody>
   </table>    
</td>
</tr>
</tbody>
</table>
    Así se verá una entrada creada con este formato:
Entrada con sidebar derecha y color de fondo

5.- Entrada con dos sidebar, izquierda y derecha: En este formato las dos sidebar tienen un color de fondo diferente al del blog (bgcolor="#322a2a"), que puede ser cambiado o eliminado. El siguiente es el código:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>
   <table border="0" cellspacing="0"cellpadding="0" width="210px" align="left" bgcolor="#322a2a">
   <tbody>
   <tr>
   <td>
      Contenido de la sidebar izquierda
   </td>
   </tr>
   </tbody>
   </table>
   <table border="0" cellspacing="0"cellpadding="0" width="210px" align="right" bgcolor="#322a2a">
   <tbody>
   <tr>
   <td>
      Contenido de la sidebar derecha
   </td>
   </tr>
   </tbody>
   </table>  
   <table border="0" cellspacing="0" cellpadding="0" width="400px" align="center">
   <tbody>
   <tr>
   <td>
      Contenido de la entrada
   </td>
   </tr>
   </tbody>
   </table>  
</td>
</tr>
</tbody>
</table>
    Así se verá una entrada creada con este formato:
Entrada con sidebar derecha y color de fondo

6.- Entrada con dos barras a la derecha: Con el siguiente formato podemos crear entradas en un blog diseñado con la plantilla Travel, con dos columnas a la derecha. Después de hechas las modificaciones indicadas arriba para las plantillas nuevas, en el Diseñador de plantillas le damos un ancho de 980px al blog. El siguiente es el código:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>

<table border="0" cellspacing="0"cellpadding="0" width="500px" align="left">
<tbody>
<tr>
<td>
Contenido de la entrada
</td>
</tr>
</tbody>
</table>

<table border="0" cellspacing="0"cellpadding="0" width="400px" align="right">
<tbody>
<tr>
<td>

<table border="0" cellspacing="0"cellpadding="3" width="195px" align="left" bgcolor="#0f211c">
<tbody>
<tr>
<td>
Contenido de la primera sidebar
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellspacing="0"cellpadding="0" width="195px" align="right" bgcolor="#0f211c">
<tbody>
<tr>
<td>
Contenido de la segunda sidebar
</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
    Así se verá una entrada creada con este formato en un blog-plantilla Travel:
Entrada con sidebar derecha doble
0 comentarios
Etiquetas: , , , , , ,
Suscribirse a: Entradas ( Atom )