PARA ESO EST LA BLOGUERA!

Te recomiendo vehementemente que personalices tu Blog al mximo, que lo hagas resaltar entre otros blogs, que consigas al primer golpe de vista que tu blog sea TU BLOG y no uno ms entre tantos. Evidentemente, esto se consigue con un buen contenido, pero la impresin visual es casi tan importante a la hora de que alguien se detenga y observe. Y tambin es un regalo del autor del blog hacia sus lectores, una expresin de su personalidad y gustos, y un requisito indispensable para conseguir lo que llamamos UN BLOG CON ESTILO. Antes de empezar, 2 cosas: guarda tu plantilla antes de nada, usa la vista previa para verificar resultados, borra los cambios que no te gusten y vuelve a empezar, usa CRTL + F para buscar las diferentes partes de la plantilla, y guarda los cambios una vez ests satisfecho con ellos. [+/-] CAMBIAR EL FONDO Es el primer cambio que efecto en mis blogs. Marca la principal diferencia con otros blogs al primer golpe de vista. Puedes poner fondos animados (contrlate, pero si no puedes evitarlo, echa un vistazo a lo que nos propone Aadvark), un imagen que se repita, una imagen grande que lo cubra todo, una imagen pequea posicionada en el lugar que elijas, puedes no poner imagen y cambiar simplemente el color... En fin, puedes hacer lo que quieras, pero, dnde? Echemos un vistazo a mi plantilla: body { background:$bgcolor; margin:0; padding-left: 100px; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; background-color: #EBEAEC; background-image: url(http://lablogueria.googlepages.com/fondo.png); background-attachment: fixed; background-position: bottom left; background-repeat: no-repeat; border-color: #ffffff;

border-width:0px ; border-style: solid; } Aqu tenemos especificado en este orden: -

el color del fondo, la URL de la imagen que queremos aadir, con "fixed" le decimos que permanezca fijo cuando bajamos la pgina, la posicin donde queremos fijar la imagen, en caso de que sea una imagen pequea, - que la imagen NO se repita aunque sea pequea. Puedes aadir lneas si no estn en tu plantilla, como por ejemplo background-image, o eliminarlas si deseas por ejemplo que el fondo se mueva a la vez que la pgina (position:fixed). Si usas una imagen pequea y quieres que se repita para crear un fondo, cambia norepeat por repeat, y si deseas que no se repita sino que aparezca en la parte superior derecha de la pgina, por ejemplo, cambia el bottom-left por top-right.

[+/-] MEDIDAS Y POSICIN DEL CUERPO Y SIDEBAR Ahora, digamos que quieres que el cuerpo de las entradas sea ms amplio, y la sidebar ms estrecha, o transparente, o cambiarla de posicin: /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 920px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 500px; float: left;

margin-left: 0px; padding: 15px; border: double 0.4em $bordercolor; background-color:#f8f8ff; filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; -khtmlopacity:0.85;

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: 140px; float: right; padding: 10px; border:6px outset grey; background-color:black; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtmlopacity:0.90; 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 */ } OUTER-WRAPPER: es la envoltura externa, lo que contiene al cuerpo y a la sidebar; ajusta las medidas, y recuerda que deben ser mayores que el tamao de lo que contiene: es decir, si el cuerpo principal o "main-wrapper" mide 600px y la sidebar 200px, y adems tienen entre ellas un margen de 10 px (para separarlas), pues el "outerwrapper"deber medir al menos 810px, o la barra lateral se desplazar hacia abajo por falta de espacio; tambin has de respetar la alineacin, si la sidebar la pones a la derecha, acurdate de cambiar la alineacin del cuerpo principal hacia la izquierda. MAIN-WRAPPER: es el cuerpo principal y contiene las entradas, y lo que pongas encima o debajo de stas. En este caso est posicionada a la derecha (right) de la sidebar, pero podras ponerla a la izquierda (left). Eso s, no olvides entonces cambiar tambin la posicin de la sidebar para que se coloque al otro lado. Ponle el color que quieras, en mi caso, escog que fuera un poco transparente, y para ello aad un filtro de opacidad; si quieres transparencia, copia y pega esa

lnea y disminuye el nmero para hacerla ms transparente y aumntalo para menor transparencia. Ojo! La transparencia se aplicar a TODO lo que contenga, es decir, texto y fotos de las entradas; asi que no te pases o ser ilegible e invisible. SIDEBAR-WRAPPER: pues s, s, es la sidebar como ya habrs intuido; y, qu es el padding? Pues la distancia entre el borde y lo que contiene; dale un valor de entre 6 y 10 px. para evitar que el texto se pegue a los bordes. Si quieres que tu sidebar, como la ma, tenga un borde, pues adelante, juega con el tamao y los diferentes tipos de bordes. Si quieres aadir una segunda sidebar, puedes hacerlo fcilmente, te explico cmo aqu.

[+/-] MEDIDAS DEL HEADER Y FOOTER Si cambias las medidas del cuerpo principal, probablemente quieras hacer coincidir con stas las del header y footer; se especifican aqu: /* Header ---------------------------------------------- */ #header-wrapper { width:920px; margin:0 auto 10px; border:1px solid $bordercolor; } Esa es la cabecera, vers que su medida coincide con la del outerwrapper. /* Footer ----------------------------------------------- */ #footer { width:920px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em;

 text-align: center; } Y esta es la envoltura del footer o pie de pgina; para un resultado uniforme, iguala tambin sus medidas con las del cuerpo principal o cabecera. Y, qu es eso de line-height y text-transform? Lo primero, indica la distancia entre las lneas de texto, y lo segundo, indica que se ha de transformar el texto del footer en MAYSCULAS. Puedes simplemente borrar esa lnea si deseas un texto normal.

[+/-] DESPLAZAR EL CUERPO HACIA UN LADO Y para completar esta entrada, supongamos que deseas que el cuerpo de tu blog, que ahora mismo aparecer en el centro, se desplace hacia la izquierda, para dejar al descubierto la imagen de fondo, o lo que sea. En este blog puedes ver que el margen izquierdo es mayor que el derecho. Dnde hacemos este ajuste? Pues aqui: body { background:$bgcolor; margin:0; padding-left: 100px; color:$textcolor; Le estamos diciendo a todo el conjunto del cuerpo, que se desplace 100 pixels DESDE la izquierda, o sea HACIA la derecha. Con estos ajustes bsicos, habrs conseguido personalizar tu blog y cambiar su apariencia estndar y uniforme, diferenciarlo del resto. Puedes usar cualquier plantilla, y transformarla a tu gusto. Suerte, y que la inspiracin te acompae!