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)



15 comentarios:

don pablo 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 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

KAT 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!

KAT 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

disa dijo...

色情,色情影片,同志色教館,色色網,色遊戲,自拍,本土自拍,kk俱樂部,後宮電影院,後宮電影,85cc免費影城,85cc免費影片,免費影片,免費小遊戲,免費遊戲,小遊戲,遊戲,好玩遊戲,好玩遊戲區,A片,情趣用品,遊戲區,史萊姆好玩遊戲,史萊姆,遊戲基地,線上遊戲,色情遊戲,遊戲口袋,我的遊戲口袋,小遊戲區,手機遊戲,貼圖,A片,A片下載,成人影城,愛情公寓,情色貼圖,情色,色情網站,色情遊戲,色情小說,情色文學,色情,aio交友愛情館,色情影片,臺灣情色網,寄情築園小遊戲,情色論壇,嘟嘟情人色網,情色視訊,愛情小說,言情小說,一葉情貼圖片區,情趣用品,情趣,色情漫畫,情色網,情色a片,情色遊戲,85cc成人片,嘟嘟成人網,成人網站,18成人,成人影片,成人交友網,成人貼圖,成人圖片區,成人圖片,成人文章,成人小說,成人光碟,微風成人區,免費成人影片,成人漫畫,成人文學,成人遊戲,成人電影,成人論壇,成人,做愛,aio,情色小說,ut聊天室

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