Mostrando entradas con la etiqueta edicion HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta edicion HTML. Mostrar todas las entradas

5.8.10

Centrar imagen de la cabecera de Blogger


Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos:

  1. Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.

  2. Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.

  3. Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cabecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):

Vamos a Editar HTML:

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

Ponemos dentro del rectángulo de búsqueda (search) esto:

/* Header

para localizar el encabezado de la sección CSS de la cabecera, que es éste:

/* Header
----------------------------------------------- */

...e inmediatamente debajo pegamos este código:

.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 663px;
padding: 0 95px;
}
  • margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
  • margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
  • width: 663px; corresponde a una imagen con 663 pixeles de ancho.
  • padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.

En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla.

Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla.

Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:

Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código:

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

...y le agregamos esta línea:

  text-align:center;

Debiendo quedarnos así:

.Header h1 {
  text-align:center;
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Observamos Vista previa y guardamos plantilla.

Así se verá el blog:

Blog Picture Window con imagen de cabecera centrada


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

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

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

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

6.7.10

Cambiar sitio sidebar - Plantillas Rounders


La sidebar de la plantilla Rounders está al lado derecho. La pasaremos al lado izquierdo.

Vamos a Edición de HTML:

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

  1. Localizamos los siguientes códigos:

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

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


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

    En donde está:

    float:$startSide;

    ...lo cambiamos por:

    float:$endSide;

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


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

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

        <div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
          <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
    </b:section>
        </div></div>

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

Cambiar de sitio la sidebar - Plantilla Denim



La sidebar de la plantila Denim está al lado derecho. La pasaremos al lado izquierdo.

Vamos a Edición de HTML:

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

  1. Localizamos estos códigos:

    #main-wrapper {
      margin-$startSide: 14px;
      width: 464px;
      float: $startSide;
      background-color: $mainBgColor;
      display: inline;      
      word-wrap: break-word;
      overflow: hidden;      
    }

    #sidebar-wrapper {
      margin-$endSide: 14px;
      width: 240px;
      float: $endSide;
      background-color: $mainBgColor;
      display: inline;      
      word-wrap: break-word;
      overflow: hidden;      
    }

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

    • En donde está start lo eliminamos y en su lugar ponemos end.
    • En donde está end lo eliminamos y en su lugar ponemos 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='Attribution1' locked='false' title='' type='Attribution'/>
    <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>

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