epelpad

¡¡ Crear Plantilla Para Blogger !!

Parte 1...

Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.

¡¡ Crear Plantilla Para Blogger !!

Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo más simple que es la plantilla Mínima.

Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.

Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.

blogger


Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están.

De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.

Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.

plantilla


Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width) que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores.

Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.

ancho real = width + border + margin + padding

Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.

Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.

Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:
<div class="clear"></div>
Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor.

¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.

plantilla para bloggercomo hacer una plantilla para bl


Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar.

En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:
#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}
y lo cambiamos por esto:
#footer-wrapper {
clear: both;
margin: 0 auto;
width: 660px;
}

#footer {
letter-spacing: .1em;
line-height: 1.6em;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
}
También agregaremos esto para que todos los bloques queden definidos:
#content-wrapper {
position: relative;
width: 100%;
}
Y ocultaremos la navbar porque me molesta:
#navbar {
display: none;
height: 0;
visibility: hidden;
}
Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos: [VER EJEMPLO]

Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $bodyfont;
}
Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería:

10 - 1024 - 10 = 1004

Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.

¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.

Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:
#outer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}

#header-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}

#footer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}
Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS:
#main-wrapper {
.......
width: 560px; /* 410 + 150 = 560 */
}

#sidebar-wrapper {
.......
width: 390px; /* 220 + 170 = 390 */
}
Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor [VER EJEMPLO]

¿Podemos seguir cambiando cosas? Sí: esto continuará ...

Fuente: http://vagabundia.blogspot.com/2008/11/modificando-las-plantillas-tutorial-1.html

Parte 1 http://www.taringa.net/posts/ebooks-tutoriales/3706916/%C2%A1%C2%A1-Crear-Plantilla-Para-Blogger-!!.html

Parte 2 http://www.taringa.net/posts/ebooks-tutoriales/3706955/%C2%A1%C2%A1-Crear-Plantilla-Para-Blogger-!!---Parte-2.html

Parte 3 http://www.taringa.net/posts/ebooks-tutoriales/3706969/%C2%A1%C2%A1-Crear-Plantilla-Para-Blogger-!!---Parte-3.html

Parte 4 http://www.taringa.net/posts/ebooks-tutoriales/3706979/%C2%A1%C2%A1-Crear-Plantilla-Para-Blogger-!!---Parte-4.html

12 comentarios - ¡¡ Crear Plantilla Para Blogger !!

animor89
loco de todos los tutoriales que lei este es el mejor y mas explicativo con respeto a blogger y todas sus odiosas plantillas... no puedo creer que nadie te halla dado puntos todavia! para tu mala suerte yo tambien soy novato asi que tampoco te puedo dar puntino... suerte muy bueno tuts tutos vas a favoritos y voy a seguirte leyendo. espero que te hagas new full pronto!! ( y yo tambien )
sidfreed
opino como animor que no recibas puntos por tu gran trabajo como el anterior soy novato sorry por no dejar puntos. !!!
cuando los tenga ten por seguro q te los doy por q me ayudaste muchisimo !
erudito25
opino lo mismo que todos buen laburo...
ironmanpmp
mañana hay puntos
mandame un mp para hacerme acordar
Criseg
10 puntos por el buen tuto!
henrry1
http://www.webparasaber.com/ que do perfecto garcias
simonmr
enhorabuena! te he echo NFU!
nacho_lnm
Hola, tenía una pregunta para hacerte.
Yo ya tengo un blog funcionando, pero quería hacer que el texto de las entradas se acerque más al límite. Es decir, que el texto tenga menos margen.
¿Hay alguna forma de hacerlo sin modificar la estructura el blog, cambiando tan solo el margen de las entradas?
Si me solucionás el problema te dejo 10, y sino también, por intentarlo.
¡Saludos!
thrasher315
Hola loco grecias!!
te invito!
http://www.taringa.net/comunidades/mundo-b/
dellxps5500
muy buenos tus posts pero muy dificiles de entender.....

hay que meterles mas imagenes.....