Mostrando entradas con la etiqueta plantilla simple. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantilla simple. Mostrar todas las entradas

21.7.12

Personalizar sidebar Blogger


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


Plantillas antiguas

1.- Utilizando como referencia la plantilla Mínima, vamos a Editar HTML:

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

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

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

3.- Le agregamos las siguientes líneas:

border: 0px solid; /* Grosor del borde */
border-color: #XXXXXX; /* Color del borde */
background: #XXXXXX; /* Color del fondo */
    Debiendo quedar así:
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  border: 0px solid; /* Grosor del borde */
  border-color: #XXXXXX; /* Color del borde */
  background: #XXXXXX; /* Color del fondo */
}
    Para ponerle borde a la sidebar, en 0px cambiamos el 0 por 1, por ejemplo. Las X las cambiamos por los números de los códigos de los colores correspondientes. Si queremos la sidebar sin borde agregamos únicamente la última línea (color del fondo).

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

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

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

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

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

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

5.- Vista previa ► Guardar plantilla.

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


Plantillas nuevas

1.- Utilizando como referencia la plantilla Simple, vamos a Editar HTML:

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

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

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

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

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

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

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

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

28.6.12

Reducir ancho de cabecera, plantilla simple


Reducir el ancho de la cabecera es un recurso para lograr un buen diseño en un blog de Blogger.

Tomaremos como modelo la segunda plantilla Simple ya que, por estar su cabecera bien diferenciada dentro del cuerpo del blog, se adapta fácilmente a este procedimiento:

Diseñador de plantillas
1.- Es aconsejable reducir el tamaño de los caracteres del título del blog ya que, por defecto, en esta plantilla es de 60px, tamaño que hace que la altura de la cabecera sea un tanto exagerada y, si el título es largo, ocupará en la cabecera, cuando hayamos reducido su ancho, más de una línea, aumentando aún más la altura de la cabecera. Entonces vamos a:

Página principal ► Diseño ► Plantilla ► Personalizar ► Diseñador de plantillas ► Avanzado ► Título del blog

Tamaño de la fuente en el título del blog

...y reducimos el tamaño de la fuente del título, al que mejor se adapte a la cabecera.

2.- Vamos a Edición de HTML:

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


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

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

...y lo eliminamos reemplazándolo con éste:

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
width: 570px; /*Ancho asignado cabecera*/
margin-left: 30px; /* Margen izquierdo asignado a la cabecera */
}

Con el anterior código asignamos a la cabecera un ancho y un margen izquierdo que la hagan congruente con el cuerpo de las entradas.

3.- El espacio dejado por la cabecera, a la derecha, lo ocupamos subiendo la sidebar, así:

Como la sidebar tiene, por defecto, un margen superior de 0px, tendremos que superar ese margen con un número negativo de pixeles. Entonces localizamos y eliminamos el siguiente código:

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

...reemplazándolo con éste:

.main-inner .column-right-outer {
  width: $(main.column.right.width);
  margin-right: -$(main.column.right.width);
  margin-top: -160px; /* Margen superior dado a la sidebar */
}

4.- Vista previa y Guardar plantilla.

Nota: Dependiendo de los elementos que agreguemos en la sidebar, ésta puede desplazarse hacia arriba o hacia abajo. La ponemos en el lugar preciso aumentando o disminuyendo el número de pixeles que le dimos al margen superior, cambiando la cifra y observando con la Vista previa.


15 comentarios
Etiquetas: , , , , ,

21.6.12

Sidebar fija para plantillas nuevas


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


Sidebar fija para plantilla Awesome Inc.

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

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

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

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

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

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

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

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

Localizamos el siguiente código

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

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

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

4.- Vista previa y Guardar plantilla


Sidebar fija para plantilla Simple

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

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

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

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

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

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

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

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

Localizamos el siguiente código

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

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

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

4.- Vista previa y Guardar plantilla

Vea: Sidebar fija para plantillas antiguas.

19 comentarios
Etiquetas: , , , , ,

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: , , , , , , ,
Suscribirse a: Entradas ( Atom )