Mostrando entradas con la etiqueta ancho. Mostrar todas las entradas
Mostrando entradas con la etiqueta ancho. Mostrar todas las entradas

8.10.10

Ensanchar blog - plantilla Thisaway


La plantilla Thisaway la podemos identificar en su encabezado, así:

-----------------------------------------------
Blogger Template Style
Name:   Thisaway
Date:     29 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Ensanchar un blog diseñado con la plantilla Thisaway es un tanto complicado, ya que esta plantilla contiene, en su diseño, esquinas redondeadas, y como éstas no se desplazan por pertenecer a imágenes prediseñadas, tendremos que modificarlas para acondicionarlas al ancho que pretendamos darle al blog, subir las imágenes resultantes, y cambiar las URLs en la plantilla.

Podemos también eliminar las esquinas redondeadas, eliminando las URLs de las imágenes correspondientes, y como consecuencia lógica el blog nos quedará con las esquinas cuadradas.

El siguiente es el procedimiento para ensanchar el blog conservando las esquinas redondeadas:

 

Vamos a Edición de HTML:

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

Sin expandir Plantillas de artilugios localizamos los siguientes segmentos y hacemos las modificaciones indicadas:

1.-

/* global
----------------------------------------------- */
body {
  margin: 0;
  text-align: center;
  min-width: 760px;
  background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x $startSide top;
  color: $textColor;
  font-size: small;
}

Cambiamos 760 por 940, para aumentar el ancho del cuerpo del blog.

2.-

/* layout
----------------------------------------------- */
#outer-wrapper {
  margin: 0 auto;
  width: 760px;
  text-align: $startSide;
  font: $bodyFont;
}

Cambiamos 760 por 940, para aumentar el ancho del diseño.

3.-

#content-wrapper {
  position: relative;
  width: 760px;
  background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}

Cambiamos 760 por 940, para aumentar el ancho de la envoltura del contenido.

4.-

#main-wrapper {
  display: inline; /* fixes a strange ie margin bug */
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 0;
  margin-bottom: 0;
  margin-$startSide: 3px;
  padding: 0;
  width: 483px;
  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 483 por 595, para aumentar el ancho del cuerpo de las entradas, guardando las proporciones del diseño original.

5.-

#sidebar-wrapper {
  display: inline; /* fixes a strange ie margin bug */
  float: $endSide;
  margin-top: 0;
  margin-$endSide: 3px;
  margin-bottom: 0;
  margin-$startSide: 0;
  width: 269px;
  color: $textColor;
  line-height: 1.4em;
  font-size: 90%;
  background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
  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 269 por 330, para aumentar el ancho de la sidebar, guardando las proporciones.

6.-

#sidebar {
  padding-top: 7px;
  padding-$endSide: 11px;
  padding-bottom: 0;
  padding-$startSide: 14px;
  background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

Cambiamos 179 por 245, para conservar la imagen de fondo de la sidebar en el mismo sitio en donde la tenía la plantilla original.

 

Cambio de las imágenes con esquinas redondeadas

Este Webmaster modificó las imágenes para acondicionaralas al nuevo ancho del blog, y subió las nuevas imágenes. Volvemos al inicio de la plantilla y, sin expandir plantillas de artilugios, localizamos los siquientes segmentos en los cuales cambiamos las URLs, así:

1.-

#header-wrapper {
  padding-bottom: 15px;
  background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif)
no-repeat $startSide bottom;
}

Eliminamos la URL resaltada y en su lugar ponemos ésta:

http://4.bp.blogspot.com/_A8s1QW_050o/TK3nro1CvmI/AAAAAAAAGzQ/
82FIeIZ9O9Y/s1600/bg_header_bottom.jpg

2.-

#content-wrapper {
  position: relative;
  width: 760px;
  background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif)
repeat-y $startSide top;
}

Eliminamos la URL resaltada y en su lugar ponemos ésta:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilVdaDoneRXITV5bSjiYI5Dqy-Ll2-tK5lGo6VXMT2F2igdmNJOBcbMx0wXS8xZVK3CzPBs_cpOm0kSy8k7bs5xYmIUgGoF7yaUIpl8MtXtioMLFLKdzOluBDaZWgRCVsA6g5XVO1fQ2Q/
s1600/bg_main_wrapper.jpg

3.-

#main {
  padding-top: 22px;
  padding-$endSide: 8px;
  padding-bottom: 0;
  padding-$startSide: 8px;
  background: url(http://www.blogblog.com/thisaway/bg_content.gif)
repeat-x $startSide top;

}

Eliminamos la línea resaltada, sin reemplazarla.

4.-

#sidebar-wrapper {
  display: inline; /* fixes a strange ie margin bug */
  float: $endSide;
  margin-top: 0;
  margin-$endSide: 3px;
  margin-bottom: 0;
  margin-$startSide: 0;
  width: 330px;
  color: $textColor;
  line-height: 1.4em;
  font-size: 90%;
  background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif)
repeat-x $startSide top;

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

Eliminamos la línea resaltada, sin reemplazarla.

5.-


#footer-wrapper {
  padding-top: 15px;
  background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif)
no-repeat $startSide top;
  clear: both;
}

Eliminamos la URL resaltada y la reemplazamos por ésta:

http://3.bp.blogspot.com/_A8s1QW_050o/TK3m3fdWpoI/AAAAAAAAGy4/
jKc5Xb1yrug/s1600/bg_footer_top.jpg
Por último: Vista previa y Guardar plantilla.
Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

22.8.10

Ensanchar blog-plantilla Dots


Vamos a modificar la plantilla Dots para ensanchar blogs diseñados con la misma. La podemos identificar en el encabezamiento, así:

-----------------------------------------------
Blogger Template Style
Name:     Dots
Date:     24 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Vamos a Edición 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:

1.-

#outer-wrapper {
  background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
  width:700px;
  margin:0 auto;
  text-align:$startSide;
  font:$bodyfont;
  }

Cambiamos 250 por 300 y 700 por 890.

2.-

#main-wrapper {
  width:450px;
  float:$endSide;
  padding:100px 0 20px;
  font-size:85%;
  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 450 por 600.

3.-

#sidebar-wrapper {
  width:200px;
  float:$startSide;
  font-size:85%;
  padding-bottom:20px;
  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 200 por 245.

4.-

#sidebar {
  background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
  padding:40px 10px 15px;
  width:200px;
  width/* */:/**/180px;
  width: /**/180px;
  }

Cambiamos 200 por 245 y 180 (dos veces) por 225.

5.- Vista previa y Guardar plantilla.


Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

21.8.10

Ensanchar blog - plantilla Harbor



El blog que vamos a ensanchar es el diseñado con la plantilla Harbor, que podemos identificar en el encabezamiento, así:

-----------------------------------------------
Blogger Template Style
Name:     Harbor
Date:     24 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Vamos a Edición de HTML:

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

Sin expandir plantillas de artilugios localizamos los siguientes bloques y hacemos las modificaciones indicadas:

1.-

#outer-wrapper {
  max-width:890px;
  padding: 0 30px 50px;
  width:100%;
  width/* */:/**/auto;
  width: /**/auto;
  }

Cambiamos la parte resaltada por: 100%, y con esto le damos al blog un ancho que se acomode a cualquier pantalla (también podemos dar el ancho en términos absolutos, o sea en determinado número de pixeles).

2.-

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

Cambiamos la parte resaltada por 71% y con esto aumentamos el ancho del cuerpo de las entradas. 3.-

#sidebar-wrapper {
  width:32%;
  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 la parte resaltada por 25% y con esto disminuimos, proporcionalmente, el ancho de la barra lateral. Con el ancho que tenía (32%)ocupaba, más o menos, la tercera parte del ancho del blog. Con el ancho que le hemos dado ocupará la cuarta parte.

Podemos modificar los porcentajes teniendo en cuenta que el ancho del cuerpo de las entradas, y el ancho de la barra lateral no deben exceder el 96%.

4.-

.Header .description {
  margin:0;
  max-width:700px;
  line-height:1.8em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$titlecolor;
  font: $blogDescriptionFont;
}

La parte resaltada corresponde al ancho que ocupa la descripción del blog, ubicada en la cabecera. Podemos modificarla, por ejemplo por 100%, para que dicha descripción ocupe todo el ancho de la cabecera, o el porcentaje que queramos darle sin sobrepasar, lógicamente, el 100%.

5.- Vista previa y Guardar plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

13.8.10

Ensanchar blog - Plantilla Scribe


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

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

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 modificamos las cifras resaltadas en rojo:

1.- Para ensanchar todo el blog, 700 por 940:

#outer-wrapper {
background-color:#473624;
border-$startSide:1px solid #332A24;
border-$endSide:1px solid #332A24;
width:700px;
margin:0px auto;
        padding:8px;
text-align:center;
        font: $bodyFont;
}
#main-top {
width:700px;
height:49px;
background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg")
no-repeat top $startSide;
margin:0px;
        padding:0px;
display:block;
}
#main-bot {
width:700px;
height:81px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg")
no-repeat top $startSide;
margin:0;
        padding:0;
display:block;
}
#wrap2 {
width:700px;
background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
margin-top: -14px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
text-align:$startSide;
display:block;
}

2.- Para ensanchar el cuerpo de las entradas, 430 por 600:

#main {
width:430px;
float:$endSide;
padding:8px 0;
margin:0;
  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.- Para ensanchar la barra lateral (sidebar), 150 por 220:

#sidebar {
width:150px;
float:$startSide;
padding:8px 0;
margin:0;
  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.- Debemos cambiar las imágenes que le dan un efecto sombreado al fondo del blog y al marco del mismo, como también las que corresponden a las líneas que se encuentran encima y debajo de las entradas. Si no hacemos esto, como las imágenes no se ensanchan, el blog se nos va a ver muy mal. Para lograr esto cambiamos las URLs de las imágenes originales por las URLs de las mismas imágenes, pero adaptadas al ancho que le hemos dado al blog. Éstos son los cambios:

En:

#main-top {
width:940px;
height:49px;
background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg")
no-repeat top $startSide;
margin:0px;
        padding:0px;
display:block;
}

...cambiamos la URL (resaltada en rojo), por ésta:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFq9xAPe6npMYKQ7m9EJmD-A4qdJfzwyK_TYLSjzzGxR_t-Z1r0B39W_QNjhhOufMjPDppPQVGJITrYpRK-lq2K2wLM0v5adz4APIsg8r6ljzgqyqJQtiik6J-bkVBv-d00uHoHbGzVqs/
s1600/imagenScribe1.jpg

En:

#main-bot {
width:940px;
height:81px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg")
no-repeat top $startSide;
margin:0;
        padding:0;
display:block;
}

...cambiamos la URL (resaltada en rojo), por ésta:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BhMU98CWxDjdCxQ7SGn8_DgA_yZEr7texmXkTUzPZR2ynPx2Dn5omvvS3Btd6KknPD5QJ8eleNQfd-6_c0qKKSGu5RUmolecsKFPZsl26fGm5gM6k40gofjtlXzlR44-aWWzVchK8ow/
s1600/imagenScribe2.jpg

En:

#wrap2 {
width:940px;
background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg")
repeat-y;
margin-top: -14px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
text-align:$startSide;
display:block;
}

...cambiamos la URL (resaltada en rojo), por ésta:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxUfz4GLuWe_AFD-4dPX_-R6gDubgf_cc2iKVlIpgRfyyHEX_QF0LBuAcgqwQf_qf6ICl-nqtyp-85cTr-zo3Sm0LbzWJN_J-eKTqDZWdKSVREpccEOK241ymqeH1WF76XysfYcwgQYw/
s1600/imagenScribe3.jpg

En:

#footer {
clear:both;
background:url("http://www.blogblog.com/scribe/divider.gif")
no-repeat top $startSide;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}

...y en:

#header {
  background:url("http://www.blogblog.com/scribe/divider.gif")
no-repeat bottom $startSide;
}

...Cambiamos la URL (resaltada en rojo), por ésta:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHyMIkSw3P-pXHDNKPBdG5XFpexi3lttXNoCmlSqHPE8K61VbfqxLeWdjimdrQ2BiJ5pnVpztPYKuQZDBCBo5H_vK8bJrsaaTzUi3bSHl_QHYvFpalwD7h0Ow6vZ0tm9WEbSUFHxEMTDU/s1600/imagenScribe4.gif

5.- Vista previa y Guardar plantilla

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

3.8.10

Ensanchar blog - Plantillas nuevas


Éstas son las plantillas nuevas:


  1. Simple (Sencillo)

        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Simple
    Designer: Josh Peterson
    URL:      www.noaesthetic.com
    ----------------------------------------------- */


  2. Picture Window

        <b:skin><![CDATA[/*-----------------------------------------------
    Blogger Template Style
    Name:     Picture Window
    Designer: Josh Peterson
    URL:      www.noaesthetic.com
    ----------------------------------------------- */


  3. Awesome Inc (Fantástico S.A.)

        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Awesome Inc.
    Designer: Tina Chen
    URL:      tinachen.org
    ----------------------------------------------- */


  4. Watermark (Filigrana)

        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Watermark
    Designer: Josh Peterson
    URL:      www.noaesthetic.com
    ----------------------------------------------- */


  5. Ethereal (Stéreo)

        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Ethereal
    Designer: Jason Morrow
    URL:      jasonmorrow.etsy.com
    ----------------------------------------------- */


  6. Travel (Viajes)

        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Travel
    Designer: Sookhee Lee
    URL:      www.plyfly.net
    ----------------------------------------------- */

Para ensanchar los blogs diseñados con las plantillas nuevas de Blogger no es necesario modificar las plantillas. Sencillamente vamos al diseñador de plantillas y modificamos los anchos, tanto del blog completo como el de la barra lateral (sidebar):

Vamos a Diseño ► plantilla ► Personalizar ► Diseñador de plantillas ► Ajustar ancho:

Diseñador de plantillas

Sin embargo el diseñador permite anchar el blog hasta un máximo de 1000 pixeles. Si queremos aumentar ese límite procedemos así:

Vamos a Edición de HTML:

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

Sin expandir plantilla de artilugios 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'/>

El resaltado 860px, corresponde al ancho del blog. Cambiamos el número de pixeles por el ancho que queramos darle, mayor que 1000px.

El resaltado 260px, corresponde al ancho de la barra lateral (sidebar), en este caso derecha. Lo dejamos así ya que podemos modificarlo con el diseñador, que nos permite, para la barra lateral (sidebar) un máximo de 500px, que es un ancho más que suficiente.

A diferencia de plantilla antiguas, con las nuevas no tenemos que modificar el ancho de la cabecera ni del pie del blog, ya que éstos forman parte integral del cuerpo del blog. Por lo tanto las imágenes que pongamos en la cabecera y en el pie no deberán exceder el ancho que le demos al blog.



Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

31.7.10

Ensanchar blog - plantillas Rounders


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

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

Vamos a Edición de HTML:

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

Sin expandir plantilla de artilugios localizamos los segmentos de códigos y hacemos las modificaciones indicadas con los resaltados en rojo:

  1. Para ensanchar el blog:

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


  2. Para ensanchar el cuerpo de las entradas:

    #main-wrap1 {
      width:635px;
      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 */
      }
    #main-wrap2 {
      float:$startSide;
      width:100%;
      background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat $startSide top;
      padding:10px 0 0;
      }
    #main {
      background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide;
      padding:0;
      width:635px;
      }


  3. Para ensanchar la sidebar:

    #sidebar-wrap {
      width:290px;
      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. Para ensanchar el widget pie de post:

    .main .widget {
      margin-top: 4px;
      width: 618px;
      padding: 0 13px;
    }


  5. Para ensanchar el marco exterior de las entradas:

    .main .Blog {
      margin: 0;
      padding: 0;
      width: 634px;
    }


  6. Para ensanchar la envoltura exterior del blog:

    body#layout #outer-wrapper {
      width: 930px;
    }


  7. Debido a que los blogs diseñados con las plantillas Rounders tienen las esquias redondeadas, y éstas no se desplazan, la apariencia del blog aparecerá muy extraña. Para evitar esto eliminamos todas las URLs de las imágenes que redondean las esquinas para que éstas adquieran la forma cuadrada, que también es un buen diseño. Dichas URLs las localizarremos fácilmente porque todas tienen la palabra Corners. Son las siguientes:

    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. Por último 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. Vista previa y, si todo está bien, guardamos plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

29.7.10

Ensanchar blog - plantillas Denim


El blog que vamos a ensanchar es el diseñado con la plantilla 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
-----------------------------------------------
  1. Vamos a Edición de HTML:

    Página principal ► Diseño ► Plantilla ► Edición de HTML
  2. Sin expandir plantillas de arilugios localizamos el siguiente segmento de código de la cabecera del blog:

    /* Header
    ----------------------------------------------- */
    #header-wrapper {
      margin:0;
      padding: 0;
      background-color: $headerCornersColor;
      text-align: $startSide;
    }

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


  3. Modificamos la línea resaltada, así:

    width: 760px;

    Por:

    width: 950px;

    Con esto hemos ensanchado únicamente la cabecera.


  4. Vamos al código del contenido y modificamos las líneas resaltadas, así::

    /* Content
    ----------------------------------------------- */

    .clear {
      clear: both;
    }


    #content-wrapper {
      width: 760px;
      margin: 0 auto;
      padding: 0 0 15px;
      text-align: $startSide;
      background-color: $mainBgColor;
      border: 1px solid $borderColor;
      border-top: 0;
    }
    #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 */
    }
    #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 */
    }

    width: 760px;

    Por:

    width: 950px;;

    ...y

    width: 464px;

    Por:

    width: 654px;

    Así hemos ensanchado el cuerpo del contenido y el de las entradas. Hemos aumentado en 190px el ancho del blog y el cuerpo de las entradas. La sidebar la hemos dejado como estaba (240px).

    Podemos variar los anchos según nuestra conveniencia, teniendo en cuenta que la suma del ancho del cuerpo de las entradas, más el ancho de la sidebar, más 56px que corresponden al espacio entre el cuerpo de las entradas y la sidebar, debe ser igual al ancho del blog. En nuestro caso 654 más 240 más 56 nos da 950px, que es el ancho del blog.


  5. Vista previa y guardar cambios.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

15.2.10

Ensanchar blog de Blogger


Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

Ensanchar blog, para plantillas Mínima

  1. Vamos a Editar HTML...

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

    ...y localizamos la instrucción #outer-wrapper { que es el ancho del blog.

  2. En la línea width:660px; cambiamos el número de pixeles (660) por 850, que es un ancho recomendable.

  3. Más abajo localizamos la instrucción #main-wrapper { que es el ancho de las entradas.

  4. En la línea width:410px; cambiamos el número de pixeles (410) por 580, o por el ancho que cada bloggero quiera darle a las entradas de su blog.

  5. Continuando más hacia abajo ubicamos la instrucción #sidebar-wrapper {, que es el ancho de la barra lateral.

  6. en la línea width: 220px; cambiamos el número de pixeles (220) por 240, o por el ancho que cada bloggero quiera darle a la barra lateral de su blog.

  7. El ancho del cuerpo de las entradas ( #Main-wrapper { ) más el ancho de la barra lateral ( #Sidebar-wrapper { ) no deben sobrepasar el ancho que le hemos dado al blog, que en este caso es de 850 pixeles. Debebemos procurar, por el contrario, que la suma de estos dos anchos sea un poco menor (30px) que el ancho del blog.

  8. Más arriba en nuestra plantilla localizamos la instrucción #header-wrapper {, que es el ancho de la cabecera del blog y, en la línea width:660px;, cambiamos el número de pixeles (660) por 850, que es el ancho que le hemos dado a nuestro blog.

  9. Hacia abajo en la plantilla localizamos #footer {, que es la barra inferior o pie del blog, y en la línea width:660px; cambiamos el número de pixeles (660) por 850.

  10. Por último con la vista previa confirmamos que todo está correcto y guardamos los cambios.
Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway