domingo, 15 de agosto de 2010

Crear una plantilla de tres columnas de blogger

Los mínimos de plantilla es la forma más fácil de personalizar la plantilla de Blogger, ya que esta es la plantilla más simple de dos columnas, y tiene algunos parámetros en relación con los márgenes, relleno, etc. Una vez que usted ha desarrollado la tercera columna, entonces será más fácil alterar el tamaño de fuente, los colores y como lo deje esta gestión para después. Vamos a concentrarnos en el formato y presentación primero.

En primer lugar, establezca su plantilla hasta los mínimos (no el tramo de plantilla, pero de cualquier color no lo hará!), A continuación, siga estas instrucciones
  1. Ir a Plantilla> Edición de HTML, dejando el widget "Expandir plantillas de" sin marcar caja.
  2. Ahora, encontrar esta sección en el código HTML
# Sidebar-wrapper (width: 220px; float: right; palabra-wrap: break-palabra; / * para fijar texto largo romper flotan en la barra lateral * IE / overflow: hidden; / fix * para no romper el contenido de texto larga barra lateral IE float * /)

Copiar toda esta sección, y pegarlo directamente a continuación. Vamos a cambiar los elementos que he destacado en rojo a lo siguiente:

# Barra lateral izquierda-wrapper (esto hace que el css para esta sección únicas) float: left (esto hará que la nueva barra lateral flotar a la izquierda de la columna principal)

  1. Este será el estilo para el elemento de nueva barra lateral que vamos a crear la nueva.
  2. Ahora, usted necesita encontrar a esta sección más abajo en la página:
    id='main-wrapper'>
Antes de esta sección, usted debe pegar el siguiente fragmento de código:

div>id='left-sidebar-wrapper'>

Los mínimos de plantilla es la forma más fácil de personalizar la plantilla de Blogger, ya que esta es la plantilla más simple de dos columnas, y tiene algunos parámetros en relación con los márgenes, relleno, etc. Una vez que usted ha desarrollado la tercera columna, entonces será más fácil alterar el tamaño de fuente, los colores y como lo deje esta gestión para después. Vamos a concentrarnos en el formato y presentación primero.

En primer lugar, establezca su plantilla hasta los mínimos (no el tramo de plantilla, pero de cualquier color no lo hará!), A continuación, siga estas instrucciones:

  1. Ir a Plantilla> Edición de HTML, dejando el widget "Expandir plantillas de" sin marcar caja.
  2. Ahora, encontrar esta sección en el código HTML:
    # sidebar-wrapper { width: 220px; float: right ; 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: right; palabra-wrap: break-palabra; / * para fijar texto largo romper flotan en la barra lateral * IE / overflow: hidden; / fix * para no romper el contenido de texto larga barra lateral IE float * /)
    Copiar toda esta sección, y pegarlo directamente a continuación. Vamos a cambiar los elementos que he destacado en rojo a lo siguiente:
    # Barra lateral izquierda-wrapper (esto hace que el css para esta sección únicas) float: left (esto hará que la nueva barra lateral flotar a la izquierda de la columna principal)
    Este será el estilo para el elemento de nueva barra lateral que vamos a crear la nueva. Ahora, usted necesita encontrar a esta sección más abajo en la página:
    id='main-wrapper'>
    antes de esta sección, usted debe pegar el siguiente fragmento de código:
    id='left-sidebar-wrapper'>
    / div>

Voy a explicar los elementos de este código para ayudar a entender lo que acabamos de hacer:

Esta sección le indica al navegador que la barra lateral-izquierdo elemento existe aquí, y buscar en el css para el estilo apropiado para este elemento.

Esto le indica al navegador la clase del elemento de la barra lateral y todos los demás elementos (widgets) que pueden incluirse en esta sección. El ID de este elemento debe ser "barra lateral izquierda" con el fin de que sea único, esto causaría problemas al visualizar. Es preferible para que se ofrecerá en el diseño.

Si obtiene una vista previa de la plantilla, te darás cuenta de que el lateral derecho estará debajo de la sección principal en este momento. Esto se debe a lo externo-wrapper es todavía lo suficientemente amplia como para dar cabida a una barra lateral. Así que ahora tenemos que ampliar la envoltura oputer dar cabida a esta nueva barra lateral. Encuentre esta sección en el código HTML:
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660 px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } / * Wrapper---------------------------------------------- Ultraterrestre - * / # externo-wrapper (width: 660 px; margin: 0 auto; padding: 10px; texto-align: left; fuente: $ bodyfont;)


  1. Tenemos que aumentar el ancho de la envoltura por el ancho de la barra lateral izquierda-wrapper, en este caso 220px. Por lo tanto, cambie el valor en rojo para 880px.
  2. También puede cambiar el ancho de la cabecera de 880px-wrapper para que abarquen el nuevo ancho de tu blog:
    #header-wrapper { width: 880 px; margin:0 auto 10px; border:1px solid $bordercolor; } # cabecera-wrapper (width: 880 px; margin: 0 auto 10px; frontera: 1px $ BorderColor sólidos;)
  1. En este punto, usted debe guardar la plantilla. En la actualidad, su nueva barra lateral no se verá como no hay reproductores que contiene, aunque todavía estará presente en el marcado de la página. Una vez que haya guardado la plantilla, ve a Plantilla> Elementos de página en su tablero de instrumentos de Blogger.
  2. Su sección de diseños de ahora debe ser algo como esto: Ahora puede agregar un elemento de página (o dos) a su nueva barra lateral izquierda.
  3. Si agrega nada a esta barra lateral izquierda, probablemente se dará cuenta de que los atascos hasta la sección principal, así: Esto es porque no hay espacio definido entre la izquierda-barra lateral y la sección principal. Tenemos que crear este espacio en la plantilla de HTML de la. Para ello, vamos a añadir un margen al lado izquierdo de la sección de las entradas principales. Encuentra el siguiente código en su plantilla de HTML y añadir el código definido en rojo:
    #main-wrapper { width: 410px; float: left; margin-left: 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 */ } # Main-wrapper (width: 410px; float: left; margin-left: 20px; palabra-wrap: break-palabra; / * para fijar texto largo romper flotan en la barra lateral * IE / overflow: hidden; / fix * no por mucho tiempo contenido en texto romper barra lateral * IE flotador /)
    Esto define un espacio de margen de 20 píxeles entre la izquierda y la barra lateral de la columna principal. También debe asegurarse de que ajustar el ancho de la THW exterior-envoltorio de 880px a 900px para garantizar el ancho de tu blog es suficiente para dar cabida a este margen también. O eso, o usted podría reducir el ancho de la columna principal / una barra lateral por 20 píxeles para servir al mismo propósito. Ahora, su vista previa de la plantilla debería ser más bien así: 9. Por último, guardar la plantilla y disfrute de su nueva barra lateral!

Los mismos principios descritos aquí pueden ayudar a crear una plantilla de tres columnas de cualquier plantilla de Blogger, aunque es posible que usted tenga que ajustar el ancho, márgenes y el relleno para su nueva barra lateral con el fin de que se vea la manera que usted desea .

También, usted puede configurar su nueva barra lateral a float a la derecha, y tienen dos barras laterales a la derecha de la columna principal, si así lo prefiere. Simplemente es necesario ajustar el CSS de tu nueva barra lateral que float: right; en su lugar.

Para Comentar Elige el Sistema de Comentario de tu Agrado:
comentarios google
comentarios blogger
comentarios facebook

Comparte este post con tus amigos!

...o también puedes seguir el blog en:

No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.

Ingresa tu correo electrónico:

Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.

0 comentarios:

Comparte tu opinión con los demás, deja un comentario. ↓

Los comentarios son moderados, si contienen insultos o son ofensivos no se publicaran.

Es muy importante saber tu opinion sobre lo que se publica en este blog asi que POR FAVOR DEJA TU COMENTARIO.

Comentar es facil, simplemente escribe tu comentario en el cuadro de abajo, trata de comentar con tu perfil abilitado o donde dice Comentar como: selecciona Nombre/URL escribes tu nombre y listo!! (URL puede dejarse en blanco)

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t Add smileys to Blogger +

 

©2009 - 2013 Pichujitos | Theme diseñado por chicoloco123 para Fuutec.com | Ir arriba ↑