Mostrando entradas con la etiqueta plantilla picture window. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantilla picture window. Mostrar todas las entradas

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

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