15.8.10

Agregar sidebar (barra lateral) - Plantilla Awesome


La plantilla Awesome (Fantástico, S.A.) es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda.

Vamos a Edición de HTML:

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

Sin expandir plantillas de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:

  1. Código original:

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

    Código modificado:

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

    Hemos aumentado el ancho del blog a 980px, y a las dos barras laterales (sidebars), tanto a la que ya teníamos, como a la que agregamos, les hemos puesto un ancho, a cada una, de 220px.


  2. Código original:

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

    Código modificado:

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

    Hemos habilitado la columna izquierda o barra lateral (sidebar) izquierda.

  3. Al final de la plantilla encontramos este código:

    <b:section-contents id='sidebar-right-1'>
    <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
    <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
    </b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

    Inmediatamente encima del mismo ponemos esto:

    <b:section-contents id='sidebar-left-1'>
    <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
    </b:section-contents>


  4. La línea resaltada debemos eliminarla del código que teníamos, para que no nos dé error por repetición, ya que la hemos puesto en el código que agregamos. Corresponde al widget del perfil, que hemos puesto en la barra lateral izquierda.


  5. Vista previa y guardar plantilla.


  6. Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

Diseñador de plantillas

..y veremos que ya tenemos habilitado el control para la barra lateral izquierda.

Éste es el blog original:

Blog, plantila Awesome con una sidebar

Y éste es el blog con la barra lateral que agregamos, en la cual está el perfil más un gadget añadido:

Blog-plantilla Awesome con dos sidebares

Podemos añadir en las dos barras más gadgets en Añadir y organizar elementos de página. http://bloguermast.blogspot.com/2010/08/ensanchar-blog-harbor.html

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

4 comentarios :

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

Buenos días he averiguado que para esta plantilla el sidebar se llama "sidebar-left-1". ¿Cual es el nombre para la sección de las entradas?.

Veras quiero que cuando se "pinche" en una página estática desaparezca el sidebar-left-1 y que la columna de las entradas ocupe todo el ancho.

Muchas gracias

Comentario escrito por Pedro Pablo Pachón : #

Jocargali: La sección de las entradas o envoltura de las entradas se llama main-wrapper.

Para ocultar la sidebar con una página estática, éste es el tutorial:

http://bloguermast.blogspot.com/2012/05/ocultar-sidebar-paginas-estaticas.html

Saludos.

Comentario escrito por Pedro Pablo Pachón : #

Nuria, lamentablemente no puedo ayudarle; la plantilla wu wei es adaptada de Wordpress y ese código no lo manejo. Manejo los originales de Blogger.
Saludos.

Comentario escrito por Unknown : #

cómo añadir páginas nuevas en la barra lateral derecha, pues al añadir una página nueva me aparecen en la barra lateral izquierda.

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.