Principal--Contacto--Bar

Te invitamos al Bar de los Webmasaters Principintes, un nuevo lugar para compartir ideas y sacarte dudas.

Modificar ancho de blogs en Blogger

Blogspot es una plataforma de blogs enormemente flexible, si bien no permite en principio trabajar con páginas estáticas, barra de navegación, categorías, etc. Digo en principio porque su enorme flexibilidad le permite publicar un blog a cualquier persona que sepa leer y encender una computadora y por otro lado es un sistema enormemente permisivo en donde un diseñador o programador con buen conocimiento de html y css puede modificar un blogger casi a su entera voluntad.

Ya en YoHagoWeb hablamos de pequeños trucos de configuración, ahora comenzamos a tocar la plantilla con uno de los factores más fáciles de comprender pero tremendamente útil y necesario, Cambiar el ancho de nuestros blogs ya que muchas platillas de blogger son de ancho fijo y de la época en que la mayoría teníamos las pantallas en 800px, unos 5 años (que en internet son 5 siglos.)

En este caso trabajaremos con ancho fijo ya que siempre es lo recomendable para los principiantes.

Le podremos un acho de 900px pero haciendo tus propios cálculos, podrás adaptarlo a tus necesidades.

Trabajaremos sobre la plantilla: Minima Designer: Douglas Bowman , por ser la más simple y la que vienes por defecto, es la primera en la lista. Pero en estos detalles las platillas de blogger difieren muy poco, casi nada.

He dejado toda la primera parte en gris por que es solo para que sirba de referencia para encontrar la parte que nos interesa.

1) Lo primero es ir a tu panel de contro/diseño/edición de html

2) Siempre antes de modificar la plantilla pega una copia en el blok de notas y guárdala (Webmaster precavido sobrevive)

Has las modificaciones y dale al botón de modificar platilla que esta debajo de todo.

Si todo sale mal, me podés insultar en este formulario de contacto.

Este pos está redactado para responder una pregunta de www.cavehomosapiens.blogspot.com


<?xml version="1.0"
encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html
expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include
data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template
Style

Name: Minima

Designer: Douglas
Bowman

URL:
www.stopdesign.com

Date: 26 Feb
2004

Updated by:
Blogger Team

----------------------------------------------- */


/* Variable
definitions

====================

<Variable
name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#333333">

<Variable
name="textcolor" description="Text Color"

type="color" default="#333" value="#ffffff">

<Variable
name="linkcolor" description="Link Color"


type="color" default="#58a" value="#ffff66">

<Variable
name="pagetitlecolor" description="Blog Title Color"

type="color" default="#666" value="#cc0000">

<Variable
name="descriptioncolor" description="Blog Description Color"

type="color" default="#999" value="#ffff66">

<Variable
name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#cc0000">

<Variable
name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#333333">

<Variable
name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#cc0000">

<Variable
name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#ffffff">

<Variable
name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#cc0000">

<Variable
name="bodyfont" description="Text Font"


type="font" default="normal normal 100% Georgia, Serif" value="normal normal
100% Georgia, Serif">

<Variable
name="headerfont" description="Sidebar Title Font"

type="font"


default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"
value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">


<Variable name="pagetitlefont"
description="Blog Title Font"

type="font"


default="normal normal 200% Georgia, Serif" value="normal bold 220% Georgia,
Serif">


<Variable name="descriptionfont"
description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif">

<Variable
name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif">


<Variable name="startSide"
description="Side where text starts in blog language"

type="automatic" default="left" value="left">

<Variable
name="endSide" description="Side where text ends in blog language"

type="automatic" default="right" value="right">

*/


/* 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;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0

}


/* Header

-----------------------------------------------

*/



#header-wrapper {



width:660px; ancho de la cabecera ( le
agregamos 200px) queda en 860)



margin:0 auto 10px;


border:1px solid
$bordercolor;


}



#header-inner {



background-position: center;


margin-left:
auto;



margin-right: auto;


}



#header {


margin: 5px;


border: 1px solid $bordercolor;


text-align: center;


color:$pagetitlecolor;


}



#header h1 {


margin:5px 5px 0;


padding:15px 20px .25em;


line-height:1.2em;


text-transform:uppercase;


letter-spacing:.2em;


font: $pagetitlefont;


}



#header a {


color:$pagetitlecolor;


text-decoration:none;


}



#header a:hover {


color:$pagetitlecolor;


}



#header .description {


margin:0 5px 5px;


padding:0 20px 15px;


max-width:700px;
ancho de la descripción del blog )le agregamos
200px) queda en 900


text-transform:uppercase;


letter-spacing:.2em;


line-height: 1.4em;


font: $descriptionfont;


color: $descriptioncolor;


}



#header img {


margin-$startSide: auto;


margin-$endSide: auto;


}




/* Outer-Wrapper



----------------------------------------------- */


#outer-wrapper {


width: 660px;
Ancho del cuerpo principal (le agregamos 200px) queda
en 860)


margin:0 auto;


padding:10px;


text-align:$startSide;


font: $bodyfont;


}



#main-wrapper {


width: 410px;
Ancho del cuerpo de los post. (le agregamos 200px)
queda en 610


float: $startSide;


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;
Ancho de la columna lateral (por el momento lo dejamos,
pero ya estas capacitado para tomar tu propia decisión al respecto) tengamos en
cuenta que estamos trabajando con ancho fijo calculando la configuración de
pantalla más usada por los internautas que es de 1025px de ancho, y en este caso
es recomendable trabajar con un ancho total máximo de 960px o como mucho 1000,
por lo tanto puedes agregarle unos pixels a la columna lateral. pero en este
caso también tendrás que agregar estos mismos px a #outer-wrapper {Ancho
del cuerpo principal


Repito, creo que con las pocas
explicaciones dadas hasta el momento, usando simple lógica ya podrás adaptar al
ancho de tu blog a tu gusto o necesidades


Primero decides el ancho total,
después adaptas el resto de los componentes y simplemente lo que quitas de un
lado lo agregas en el otro.


Ante cualquier duda o sugerencia
deja tu comentario en este post o usa nuestro

formulario de contacto,

1 comentario:

BoulderCantabria dijo...

Hola, yo tengo la plantilla Watermark de Josh Peterson, y son incapaz de encontrar el #header-wrapper {


http://daciaduster4x4.blogspot.com/

4:41 p. m.

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Twitter de Wordpress España

Cargando...