Modificando La Plantilla De Blogger

Ing. Jorge Ramón Baylón Carranza Cambiar el ancho de las áreas de encabezado, contenido y barra lateral Lo primero que se tiene que hacer es acceder a la pestaña de DISEÑO, hacer clic en la opción EDICION DE HTML que mostrará la ventana de la Fig. 1. Tal y como lo recomienda esta página de configuración, realizar una copia de la plantilla en tu disco duro, ya que para cualquier modificación incorrecta nos queda una copia de seguridad de nuestra plantilla correcta.

Despues de haber realizado la copia de seguridad de la plantilla, podemos iniciar el proceso de edicion de la plantilla, para lo cual hay un recuadro que contiene el código que forma la plantilla. Como pueden apreciar existe mucho código, no obstante para nuestro caso sólo modificaremos las áreas que se encuentran resaltadas (fuente color rojo y resaltador amarillo) tal y como se muestra en el código a continuación:

Ing. Jorge Ramón Baylón Carranza

…

*/ /* Use this with templates/template-twocol.html */ body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

…

/* Header ----------------------------------------------*/ header-wrapper (la propiedad width:800px fue #header-wrapper {

width:900px;

margin:0 auto 1px; border:1px solid $bordercolor; }

…

outer-wrapper (la propiedad width:800px fue

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper {

width: 900px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper {

width: 670px;

float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking sidebar float */ main-wrapper (laIEpropiedad }

width:500px fue modificada por

#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 */ margin:0 auto 1px; /* arreglado george */ border:1px solid $bordercolor; /* arreglado george */ background:$bgcolorgeorge; /* arreglado george */

/* Headings ----------------------------------------------- */

…

/* Posts ----------------------------------------------- */

…

/* Comments ----------------------------------------------- */

…

/* Profile ----------------------------------------------- */

sidebar-wrapper (la propiedad width:180px fue modificada por width:220 px)

Ing. Jorge Ramón Baylón Carranza

… /* Footer ----------------------------------------------- */

…



…



Ing. Jorge Ramón Baylón Carranza Nota:

Para ubicar de manera rápida el código por ejemplo outer-wrapper, debemos utilizar la opción de búsqueda en la pagina web del navegador

Finalmente, una vez realizado los cambios en cada una de las partes a redimensionar el ancho en nuestro blog hacer clic en

Términos Básicos:

 Plantilla: Una plantilla es una forma de dispositivo que proporciona una







separación entre la forma o estructura y el contenido. Es un medio o un instrumento que permite guiar, portar o construir un diseño o esquema predefinido. HTML: siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). : define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera podemos encontrar: •