Mostrando entradas con la etiqueta barra lateral. Mostrar todas las entradas
Mostrando entradas con la etiqueta barra lateral. Mostrar todas las entradas

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

14.8.10

Agregar sidebar - Plantilla Travel



La plantilla que vamos a modificar es la Travel, que podemos identificar en el encabezamiento, así:

-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */

Vamos a Edición de HTML:

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

Sin expandir plantilla de artilugios localizamos los siguientes códigos, y les 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'/>


  2. Código original:

    /* Widgets
    ----------------------------------------------- */
    .sidebar .widget {
      border-bottom: 2px solid $(widget.border.bevel.color);
      padding-bottom: 10px;
      margin: 10px 0;
    }

    .sidebar .widget:first-child {
      margin-top: 0;
    }

    .sidebar .widget:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    Código modificado:

    /* Widgets
    ----------------------------------------------- */
    .sidebar .widget {
      border-bottom: 2px solid $(widget.border.bevel.color);
      padding-bottom: 10px;
      margin: 10px 0;
    }

    .sidebar .widget:first-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .sidebar .widget:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }


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


  4. En el siguiente código, al final de la plantilla, eliminamos la parte resaltada:

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


  5. Inmediatamente encima del anterior código pegamos el siguiente:

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

    Con los puntos 4 y 5 hemos pasado el perfil a la barra lateral (sidebar) izquierda.

  6. Vista previa y Guardar plantilla

  • 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

    El blog original:

    Blog Travel con una barra lateral

    El blog con dos barras laterales:

    Blog Travel con dos barras laterales




    • Í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
    6 comentarios
    Etiquetas: , , , , , , ,

    6.8.10

    Agregar una sidebar - plantilla Picture Window


    La plantilla Picture Window 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 plantilla 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>
    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

    Así Teníamos en Diseño la página para añadir y organizar elementos:

    'Añadir y organizar elementos original'

    Ahora la tendremos así:

    'Añadir y organizar elementos' con una sidebar más'

    Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:

    Blog Picture Window con una sidebar agregada

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

    4.8.10

    Agregar sidebar - Plantilla simple


    La plantilla Simple es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda.

    Vamos a Editar HTML:

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

    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

    Así Teníamos en Diseño la página para añadir y organizar elementos:

    'Añadir y organizar elementos original'

    Ahora la tendremos así:

    'Añadir y organizar elementos' con una sidebar más'

    Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:

    Blog Plantilla Simple con una barra lateral (Sidebar) agregada.

    Í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
    11 comentarios
    Etiquetas: , , , , , , ,

    25.7.10

    Agregar una sidebar - Plantillas Rounders


    La plantilla que vamos a modificar es la Rounders, que podemos identificar en el encabezamiento del código, así:

    -----------------------------------------------
    Blogger Template Style
    Name:     Rounders
    Date:     27 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    Los blogs con plantilla Rounders tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

    Vamos a Edición de HTML:

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

    Sin expandir plantilla de artilugios:

    1. Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:

      #outer-wrapper {
        width:740px;
        margin:0 auto;
        text-align:$startSide;
        font: $bodyFont;
        }


    2. Modificamos la línea resaltada cambiando

      width:740px;

      ...por:

      width:985px;

      De esta manera aumentamos el ancho del blog en 245px, que es el ancho de la sidebar que vamos a agregar (240px), para que nos quede igual a la que ya tenemos, mas 5px para sumarlos a los 15px del espacio entre la primera sidebar y el cuerpo del blog y repartir esos 20px entre los espacios que dejaremos entre cada sidebar y el cuerpo de las entradas.

      Para lograr lo anterior vamos al siguiente código, que se encuentra inmediatamente después del anterior:

      #main-wrap1 {
        width:485px;
        float:$startSide;
        background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
        margin:15px 0 0;
        padding:0 0 10px;
        color:$mainTextColor;
        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 */
        }

      ...y modificamos la parte resaltada, así:

      margin:15px 0 0;

      ...por:

      margin:10px 10px 0;


    3. Más hacia abajo localizamos este 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 */
        }

      ...lo copiamos y lo pegamos inmediatamente después del mismo, modificando las líneas resaltadas, en el que pegamos, así:

      #sidebar-wrap {

      ...por:

      #newsidebar-wrap {

      ...y

      float:$endSide;

      ...por:

      float:$startSide;


    4. En los dos anteriores códigos, el que teníamos y el que pegamos, modificamos la otra línea resaltada, así:

      margin:15px 0 0;

      ...por:

      margin:10px 0 0;


    5. Siguiendo hacia abajo en la plantilla localizamos este código:

        <div id='main-wrap1'><div id='main-wrap2'>
          <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
        </div></div>

      ...encima del cual pegamos éste:

          <div id='newsidebar-wrap'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>


    6. A continuación localizamos el código de la sidebar que ya teníamos:

        <div id='sidebar-wrap'>

          <div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
            <b:section class='sidebar' id='sidebartop'>
      <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>
          </div></div>

      ...y borramos la parte resaltada, correspondiente al perfil, que hemos puesto en la sidebar nueva, para que no nos dé error por repetición.


    7. Debido a que los blogs diseñados con esta plantilla tienen todas las esquinas redondeadas y éstas no se desplazan al ensanchar, la cabecera (header) y el pie (footer) del blog nos quedarán partidos; Además la sidebar izquierda nos quedará con esquinas cuadradas y la derecha con esquinas redondeadas. Para evitar que esto ocurra y lograr uniformidad en el blog, eliminamos las imágenes que redondean estas esquinas, borrando todas las URLs en las que aparezca la palabra corners, y que son éstas:

      url("http://www1.blogblog.com/rounders/corners_main_bot.gif")
      url("http://www1.blogblog.com/rounders/corners_main_top.gif")
      url("http://www2.blogblog.com/rounders/corners_cap_top.gif")
      url("http://www.blogblog.com/rounders/corners_cap_bot.gif")
      url("http://www.blogblog.com/rounders/corners_prof_bot.gif")
      url("http://www2.blogblog.com/rounders/corners_prof_top.gif")
      url("http://www.blogblog.com/rounders/corners_side_top.gif")
      url("http://www1.blogblog.com/rounders/corners_side_bot.gif")
      url("http://www2.blogblog.com/rounders/corners_cap_top.gif")
      url("http://www.blogblog.com/rounders/corners_cap_bot.gif")


    8. Eliminamos esta URL, que corresponde a la imagen del marco que une las esquinas redondeadas del cuerpo de las entradas (la parte resaltada):

      #main {
        background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide;
        padding:0;
        width:485px;


    9. Le ponemos a la nueva sidebar el mismo color de la que ya teníamos. Para ello regresamos al código de dicha sidebar, que ya creamos, y le agregamos la línea resaltada:

      #newsidebar-wrap {
        background:#ccddcc;
        width:240px;
        float:$startSide;
        margin:10px 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 */
        }


    10. Vista previa y guardar.
    Así se verá el blog con el perfil y un widget en la sidebar agregada (izquierda):

    Blog-plantilla Rounders con una sidebar agregada.

    Í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
    0 comentarios
    Etiquetas: , , , , , , ,

    16.7.10

    Agregar una sidebar - Plantillas Denim


    La plantilla que vamos a modificar es la Denim, que podemos identificar en el encabezamiento del código, así:

    -----------------------------------------------
    Blogger Template Style
    Name:     Denim
    Designer: Darren Delaye
    URL:      www.DarrenDelaye.com
    Date:     11 Jul 2006
    -----------------------------------------------

    Los blogs con plantilla Denim tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

    Vamos a Edición de HTML:

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

    Sin expandir plantilla de artilugios:

    1. Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:

      #content-wrapper {
        width: 760px;
        margin: 0 auto;
        padding: 0 0 15px;
        text-align: $startSide;
        background-color: $mainBgColor;
        border: 1px solid $borderColor;
        border-top: 0;


    2. Modificamos la línea resaltada cambiando:

      width: 760px;

      ...por:

      width: 1000px;

      De esta manera aumentamos el ancho del blog en 240px, que es el ancho de la sidebar existente, el mismo que le daremos a la sidebar que vamos a agregar.


    3. En el código que está a continuación:

      #main-wrapper {
        margin-$startSide: 14px;
        width: 464px;
        float: $startSide;
        background-color: $mainBgColor;
        display: inline;       /* fix for doubling margin in IE */
        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

      ...podemos observar que el ancho del cuerpo de las entradas es de 464px.


    4. Inmediatamente después encontramos este código:

      #sidebar-wrapper {
        margin-$endSide: 14px;
        width: 240px;
        float: $endSide;
        background-color: $mainBgColor;
        display: inline;       /* fix for doubling margin in IE */
        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 */
      }

      ...lo copiamos y lo pegamos enseguida del mismo, modificando (en el que hemos pegado) las líneas resaltadas, así:

      #sidebar-wrapper

      ...por

      #newsidebar-wrapper

      y

      float: $endSide;

      ...por:

      float: $startSide;

      De esta manera creamos la nueva sidebar.

      Nótese que la suma de los anchos de las dos sidebar's (240px c/u), más el ancho del cuerpo de las entradas (464px), suman 944px, que no excede el ancho de 1000px que le hemos dado al blog.

      Podemos modificar los anchos de las sidebar's y del cuerpo de las entradas (columna central) a nuestro gusto y según nuestras conveniencias, siempre y cuando que la suma de los mismos no exceda al ancho del blog.


    5. En la parte inferior de la plantilla localizamos este código:

            <div id='main-wrapper'>
              <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
            </div>

      ...encima del cual pegamos éste:

          <div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>

      Así crearemos el Widget con el prefil, ubicado en la nueva sidebar.


    6. Bajando en la plantilla localizamos el código de la sidebar que ya teníamos:

            <div id='sidebar-wrapper'>
              <b:section class='sidebar' id='sidebar' preferred='yes'>
      <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:widget id='Attribution1' locked='false' title='' type='Attribution'/>
      </b:section>
            </div>

      ...y borramos la parte resaltada, para que no nos dé error por repetición.


    7. Subiendo en la plantilla localizamos este código:

      #header {
        width: 760px;
        margin: 0 auto;
        background-color: $headerBgColor;
        border: 1px solid $headerBgColor;
        color: $headerTextColor;
        padding: 0;
        font: $headerFont;
      }

      ...y cambiamos la línea resaltada, así:

      width: 760px

      por:

      width: 1000px

      ...para darle a la cabecera el mismo ancho que le dimos al blog.


    8. Hacemos vista previa y, si todo lo hemos hecho correctamente, veremos la sidebar izquierda y en ella, el perfil. Ahora podremos agregar gadgets en esta sidebar.
    Así se verá el blog con un widget agregado en la sidebar nueva:

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

    15.7.10

    Agregar una sidebar - Plantilla Minima


    La plantilla que vamos a modificar es la Minima, que podemos identificar en el encabezamiento del código, así:

    -----------------------------------------------
    Blogger Template Style
    Name:     Minima
    Date:     26 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    Los blogs con plantilla Minima tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

    Vamos a Edición de HTML

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

    Sin expandir plantilla de artilugios:

    1. Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:

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


    2. Modificamos la línea resaltada cambiando:

      width: 660px

      ...por:

      width: 950px


    3. Aumentamos el ancho de las entradas localizando el siguiente código:

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


    4. Modificamos la línea resaltada, cambiando:

      width: 410px;

      ...por:

      width: 440px;


    5. Localizamos y copiamos este segmento de 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 */
      }

      ...y lo pegamos a continuación del mismo, modificando las líneas resaltadas, así:

      #sidebar-wrapper

      ...por:

      #newsidebar-wrapper

      Y

      float: $endSide;

      ...por:

      float: $startSide;

      Con esto creamos la nueva sidebar.

      Debemos tener en cuenta que la suma de los anchos de las dos sidebar's, más el del cuerpo de las entradas, no deben exceder al ancho del blog.


    6. Bajando en la plantilla buscamos este código:

            <div id='main-wrapper'>
              <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
            </div>

      ...encima del cual pegamos éste:

          <div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>


    7. Vamos al código de la sidebar que ya teníamos:

            <div id='sidebar-wrapper'>
              <b:section class='sidebar' id='sidebar' preferred='yes'>
      <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:widget id='Attribution1' locked='false' title='' type='Attribution'/>
      </b:section>
            </div>

      ...y borramos la parte resaltada, para que no nos dé error por repetición.


    8. Le damos a la cebecera el mismo ancho que le dimos al blog, para lo cual localizamos este código:

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

      ...y modificamos la parte resaltada cambiando:

      width:660px;

      ...por:

      width:950px;


    9. Hacemos vista previa y, si todo lo hemos hecho correctamente, veremos la sidebar izquierda y en ella, el perfil. Ahora podremos agregar gadgets en esta sidebar.

    Así se verá el blog con un widget agregado en cada sidebar:

    Minima con dos sidebar's


    Í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
    0 comentarios
    Etiquetas: , , , , , , ,

    Cambiar el sitio de la sidebar - Harbor



    La plantilla Harbor tiene la sidebar en el lado izquierdo; la pasaremos para el lado derecho.

    Vamos a Editar HTML:

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

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

      #main-wrapper {
        width:64%;
        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 */
        }

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

    2. en los anteriores códigos cambiamos:

      float:$endSide;

      por:

      float:$startSide;

      ...y

      float:$startSide;

      por:

      float:$endSide;

    3. copiamos el código del sector de las entradas, que es como éste:

        <div id='main-wrapper'>
          <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
        </div>


    4. Lo pegamos inmediatamente después del código que está a continuación, que es éste:

        <div id='sidebar-wrapper'>
          <b:section class='sidebar' id='sidebar' preferred='yes'>
      <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:widget id='Attribution1' locked='false' title='' type='Attribution'/>
      </b:section>
        </div>

      ...eliminándolo del lugar que ocupaba anteriormente, para que no nos dé error por repetición.

    5. Vista previa, guardamos y tendremos la sidebar en el lado derecho.
    0 comentarios
    Etiquetas: , , ,

    14.7.10

    Cambiar de sitio la sidebar - Herbert



    La plantilla Herbert tiene la sidebar en el lado derecho; la pasaremos para el lado izquierdo.

    Vamos a Editar HTML:

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

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

        div#main-wrapper {
          float: $startSide;
          width: 66%;
          padding-top: 0;
          padding-$endSide: 1em;
          padding-bottom: 0px;
          padding-$startSide: 1em;
          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 */
        }

        div#sidebar-wrapper {
          margin: 0px;
          padding: 0px;
          text-align: $endSide;
        }

    2. En los anteriores códigos en donde está:

      start

      ...lo cambiamos por:

      end

      ...y en donde está:

      end

      ...lo cambiamos por:

      start

    3. copiamos el código del sector de las entradas, que es como éste:

            <div id='main-wrapper'>
              <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
            </div>

    4. Lo pegamos inmediatamente después de este código:

            <div id='sidebar-wrapper'>
              <b:section class='sidebar' id='sidebar' preferred='yes'>
      <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:widget id='Attribution1' locked='false' title='' type='Attribution'/>
      </b:section>
            </div>

      ...eliminándolo del lugar que ocupaba anteriormente, para que no nos dé error por repetición.

    5. Vista previa, guardamos y tendremos la sidebar en el lado izquierdo.
    0 comentarios
    Etiquetas: , , ,

    13.7.10

    Cambiar de sitio la sidebar plantilla Mínima


    La sidebar de la plantilla Mínima está en el lado derecho; la pasaremos al lado izquierdo.

    Vamos a Editar HTML:

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

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

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

    2. En ambos códigos hacemos las siguientes modificaciones:

      En donde está:

      float: $startSide;

      ...lo cambiamos por:

      float: $endSide;

      Donde está:

      float: $endSide;

      ...lo cambiamos por:

      float: $startSide;

    3. copiamos el código del sector de las entradas, que es como éste:

            <div id='main-wrapper'>
              <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>
            </div>

    4. Lo pegamos inmediatamente después de este código (puede que no sea exactamente igual ya que depende de los gadgets que tengamos en la sidebar):

            <div id='sidebar-wrapper'>
              <b:section class='sidebar' id='sidebar' preferred='yes'>
      <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:widget id='Attribution1' locked='false' title='' type='Attribution'/>
      </b:section>
            </div>

      ...eliminándolo del lugar que ocupaba anteriormente, para que no nos dé error por repetición.

    5. Vista previa, guardamos y tendremos la sidebar en el lado izquierdo.
    0 comentarios
    Etiquetas: , , ,
    Suscribirse a: Entradas ( Atom )