jueves, 22 de mayo de 2008

Modificar la Plantilla en Blogger

Bueno, os dejo otro post sin imagen.


Algunos de vosotros me habeis pedido que os explique como se hace para modificar la plantilla de Blogger de forma que las imágenes puedan ser mayores.


Aunque a cada uno os lo he mandado bien por mail o comentando en su blog, creo que podría ser de utilidad para más gente. Os transcribo el correo que remití la primera vez que me preguntaron por el tema (y que he ido reenviando a todos los que me lo han preguntado).


Os anticipio que si de fotos no tengo mucha idea, de HTML estoy absolutamente pez, por lo que os ruego, que si vais a intentar cambiar vuestra plantilla, lo primero que debeis hacer es una copia de la misma, por si acaso.


Se trata de dos cosas diferentes:


- Ampliar la plantilla para que quepa una foto mayor.

- Ampliar el tamaño físico de la foto


Empecemos por ampliar la plantilla:


Nos vamos a Edición de HTML y en mi caso tuve que modificar el ancho de:


- header-wrapper (no se que es pero lo cambié). (Le puse 950 pixeles):


#header-wrapper { width:950px; margin:0 auto 10px; border:1px solid $bordercolor; }


- Cabecera (Le puse También 950 pixeles):


#header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:950px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor;


- Zona de Comentarios (Le puse 705):


#main-wrapper { width: 705px; float: left; 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 */ }


- Zona Lateral Derecha (le puse 240, que sumados a los 705 anteriores es inferior a los 950 que tiene de ancho la página):


#sidebar-wrapper { width: 240px; 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 */}


Además cambié el código que te pongo a continuación y que no se que hace exactamente (pero lo puse igual que el ancho de la página):


#outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }


Cada vez que cambieis un parámetro dadle a previsualizar y vereiss el efecto que tiene en la plantilla (es un método poco científico pero es el que yo uso). Cuando termines se salva y listo.


Con esto hemos conseguido una zona de Imagen de 707 pixeles y 24o pixeles de zona lateral derecha.


Para poner una imagen mayor os recomiendo que alojeis las fotos en FLICKR y copieis el código de la foto (modificandole el tamaña al que mejor os venga)



14 comentarios:

Anónimo dijo...

miguel como estas?
muchas gracias por la excelente explicacion !!! muy completa !

un gusto que hayas pasado por mi blog , siempre bienvenido !!

sigo pasando para ver mas de tus trabajos !! !

se agradece !

Roberto Pato dijo...

muy oportuno yo estoy pensando en algunos cambios pero me resisto, todavía, a pasar a la nueva versión blogger... saludos

Fernando dijo...

Gracias por esta información Miguel Ángel, muy útil la información, tengo que probarlo.

saludos.

Faboo dijo...

Gracias por explicarlo, tardé bastante en caer en la cuenta de que usas FLICKR y así las fotos se ven más grandes.

Si no fuera por tí aún usaría Blogger para subir las imagenes.

Muchas gracias

Miguel Emele dijo...

Hola, Miguel Ángel. Lo primero: felicitarte por tu blog. Es muy útil y te agradezco que compartas tu saber.
Hace una semana empecé mi blog y ví que seleccionando fotos grandes aún eran pequeñas para mi gusto. Buscando "Width" en el HTML cambié los anchos que tú mencionas aquí y así tengo más espacio, pero las fotos se me siguen incrustando pequeñas en la entrada y las he de estirar al tamaño que quiero, procurando que no se me deformen en su proporción. ¿Es así como se hace o hay una manera de hacerlo con menos pasos? Gracias otra vez.

Luis Calle dijo...

Gracias Miguel Angel
Ya tenía yo ganas de que mi blog se viese a "pantalla completa".

Tus explicaciones son claras y sencillas. Fáciles de entender.

Y tus fotografías, en su gran mayoría, francamente buenas...

A partir de hoy tu página cuenta con un enlace en mi blog... creo que te lo mereces!

Un saludo

Pilar dijo...

Hola Miguel Ángel,me manda Mariluz por aquí..., he logrado hacer las fotos más grandes,pero cuando las subo se me solapan con el perfil...Sabes que hay que "toquetear" para reducir el margen izquierdo y que me quepan??,porque aunque las subo a la izquierda, quedan centradas...
Gracias por tus explicaciones , son de mucha ayuda, un saludo!

Pilar dijo...

lo conseguí...GRACIAS!!!

Luis Calle dijo...

Hola Miguel Angel
He logrado ensanchar la plantilla de mi blog, pero cuando quiero poner imágenes desde flickr me sale más grande, pero en forma de recuadro en blanco, sin imágen ¡QUÉ HAGO MAL?
de momento sigo subiendo imágenes con blogger, pero no estoy contento
¿ME AYUDAS?

Esteban dijo...

hola miguel verdad? me gusto mucho el tutorial que hiciste la verdad me fue de mucha ayuda en realidad no keria ke mis imagenes fueran mas grandes ni mucho menos pero con solo ver tu tutorial y como cambiaba mi blog con los cambios que le hacia me di cuenta de muchas cosas tanto para modificar mi blog de 2 a 3 ileras me fue de mucha ayuda tu tutorial te agradesco de antemano nos vemos

Anónimo dijo...

Order Generic Drugs Here. Get Cheap Drugs online. Buy Pills Central.
[url=http://buypillscentral.com/]Order Best Viagra, Cialis, Levitra, Tamiflu[/url]. prescription generic drugs. Top quality drugs pharmacy

Anónimo dijo...

We are glad that our comrades Procure Viagra Rebate Apothecary is one of the first in the Internet, commonly, generic Cialis Online specializing on online drugstore Cialis.

Anónimo dijo...

now I among your readers

Anónimo dijo...

webers prioritized surrounded gunshots link algebraic divest reusing unimpeded arlington marker
lolikneri havaqatsu