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.
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.
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.
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í.
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í.
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:
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.
¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
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:
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.
Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
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:
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.
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
225 comentarios:
Imposible que alguien no estienda esto: está explicado a la perfección. Qué bien me hubiera venido hace un año, pero hubo que aprender a los golpes.
(y todavía no funciona la vista previa?! que lo parió...)
Saludos.
permite que sea el primero en decirte, con perdon de la expresion, que eres el puto amo en esto ;-)
Un saludo
JMiur, por favor, ¿cuál es la diferencia hay entre footer y footer-wrapper? Porque yo tengo la mínima (requetetoqueteada) y sólo tengo el footer, a secas. Si lo modifico como acá, se me va todo al jorac....
Saludos.
Vaya pedazo de explicación!! Está todo clarísimo JMiur, ya te dije que sos un GENIO no?? :D
A mi esto por ahora no me va, yo tengo que reducir no agrandar ja ja Pero no pierdo las ilusiones...;)
Te quería preguntar, yo creo que lo vi acá, pero no me acuerdo donde ni el nombre de la entrada para buscarlo, es lo de hacer que salga la imagen en la fecha aunque hagamos dos post el mismo día, no se si me explico, no solo la imagen, sino que salga la fecha igual aunque haya dos post el mismo día, se entiende o me enrosque mal?? :S
A ver si aclaro... o oscurezco, que la fecha salga en cada post, aunque sea la misma, me parece que ahí está mejor :)
una explicación de un maestro para los que como yo estoy tratando de aprender, excelente J!!!...saludos!!!
Me pidieron que hiciera una entrada sobre este tema y la haré.
Pero caballero... cada día pone usted el listón más alto una cosa es explicar y otra ser el mejor explicando :)
Me encantó el ejemplo.
Este es, sin duda alguna, el inicio de un tutorial como tantos otros que tiene carácter de "clases magistrales", explicado con tanta claridad que nadie podría resistirse a llevarlo a la práctica.
Mil gracias por enseñarnos a diario!!!
Saludos.
Genial!!!!, este post pasa a la 'sección de indispensables', realmente muy bueno.
:( lastima que lo hayas sacado cuando ya cambie el ancho de mi plantilla, imagínate que fácil lo haces ver.
Gracias Master!!!!
Excelente explicación... muy buena recomendación... Nos va a servir muchísimo...
Gracias por los comentarios. Apabullantes de verdad. Esto dl ancho es algo bastante más facil de hacer que de explicar :D
Anahí:
En realidad, no hay diferencias. Sólo son los nombres de los DIVs o sea de los rectángulos. Si no hay uno definido en tu plantilla no importa a menos que en algún momento veas algún problema cuando agregas algo. Lo que dice el post respecto a agregarlo es sólo para que queden todos definidos con el mismo criterio pero no variará nada en la plantilla. Si quieres modificar el ancho, usa el dato de footer que allí debe estar definido width.
k_nelita:
Algo de eso puede verse acá. No es sencillo de entender y tiene varaiaciones dependiendo de la plantilla. Si estás usando el script del calendario, hay que modificarlo un poquito y agregar algo en la plantilla; encontrar dónde colcoar ese agregado es lo que puede ser engorroso. Fijate y cualqueir cosa me avisás.
Excelente, simplemente excelente! tu explicación perfecta y el ejemplo es de lo mejor! tan claro todo... :(( yo ... que lo tuve que aprender dándome la cabeza contra el monitor!! :D
Felicitaciones JMiur, maestro!
Un abrazo
Gracias por tu generosidad, estoy empezando con mi blog y creo que tendré que venir a éste con frecuencia.
Saludos,
Hola JMiur.
Uyyy, me ha ayudado bastante esto, ya tengo lista mi plantilla y puesta en mi blog!!!.
Me ha quedado, por no decir otra cosa, excelentemente fantastica, hehehe!.
Saludos y gracias por todo!!!!.
Estoy buscando el script que te comentaba el otro día... es una librería js. con ventana modal.
Lo buscaba en Google y llegué aquí ¿lo recuerdas? es que olvidé cono se llama :(
Saludos a todos y suerte, Nónimo; bienvenido :D
Gem@:
Si es donde dejateste un comentario hace unos días, se trata de PopBox. AQUÍ.
Llego un poco tarde y seguro que esto se le escapará a la mayoría, pero creo que tiene mucho que ver con el tema en general:
http://mandelrot.com/2007/02/sidebar-de-ancho-fijo-en-diseo-flexible.html
Hola Jmiur, luego de ver con calma esta explicación por fin se quitó el scroll y se ve al tamaño de la pantalla. De acuerdo a lo que vi mi error era por poner el fondo en el body y se extendía, además con esta corrección de ancho tengo la sensación que se regenera mejor y sin trabas :)
¿Cómo puedo controlar que la imagen del footer que no está en las columnas no quede tan separado de la parte donde dice diseño tanto plantilla tanto que está pero en el lado html de la plantilla no en elementos,para que no se extienda tanto? uf! espero haber sido clara jejej :D
Ah... :( sigo teniendo problemas con las flechas de los archivos, antes que se cargue el cbox funciona pero cuando se carga no funcionan las flechas sin recargar
Gracias por tus enseñanzas :)
besos ronroneados
Te felicito por la explicación Mandelrot, es muy buena. Aunque me da la sensación que lo que aquí se ha tratado aparte de ampliar la plantilla ha sido aprender a conocerla y familiarizarse con ella.
Con la frase final " esto continuará .." entiendo que se profundizará más en el tema.
Es verdad Gem@, por eso decía que tiene que ver con "el tema en general" del ancho de la plantilla; y como me lo han preguntado un millón de veces he pensado que sería útil... :-D
Pau:
Me he perdido un poco en la explicación; no entiendo bien si hablas de la página online o de si hablas de lo que ves en Diseño | Elementos de la página.
Mandelrot:
Todo es bienvenido así que cualquier aporte es apreciado :)
Gem@:
Sí. La idea es seguir y apunta más a lo general que a lo particular. Veremos hasta donde se llega :D
Parecerá el típico comentario de Spammer, pero es que me has dejado sin palabras... Para los Cateto-analfabetos como yo, este post es simplemente MA- GIS- TRAL.
Gracias!
Escribiendo la explicación, recordé que me dijiste que le pusiera las propiedades en edición de html en este caso el elemento #html4 dejando así la imagen como background, así corrigió el margen que le sobraba cuando la ponía como elemento de página tipo img style="... y para poder ocultarla en las páginas de entradas dejé solo un . :)
Gracias por tu pronta respuesta, me respondí con tu ayuda anterior y con la respuesta que me dejaste ahora prrrr :)
Aprovecho y te pregunto, en autor tengo una imagen y para los lectores otra, que tipo de condición o b:if tengo que poner para que cuando alguien escriba diga "x maulló" y cuando yo lo haga diga "x ronroneo" o si le quiero agregar una imagen que no sea la de autor, otros o anónimo
uf! me puse preguntona jejeje :D
Espero que tengas un lindo día.
besos ronroneados
Me ha encantado la explicación, es fantástica. Estoy deseando que publiques el continuará....
Gracias, un abrazo
boloo:
Saludos y gracias por el comentario.
Pau:
Si te fijas en un post de Rosa, ella explica como hacerlo AQUÍ. Creo entender que la única diferencia sería que, en lugar usar imágenes, usarías un texto.
Silvia:
En eso estamos :D
Ya lo tengo aplicado puse unos gatitos, lo aprendí contigo aquí :D cuando agregué varias cosas en el blog directo gracias a "y libranos del google page" solo pensé que se podía agregar otra condición para poner los textos :)
Gracias!
besos ronroneados
Realmente muy bueno!!
Yo personalmente soy aun un novato y me lo he pasado estudiando plantillas en sí, pero nunca terminé de entender como lo hacía Blogger con sus plantillas.
Ahora mismo voy a hacer la prueba con un nuevo blog que estoy creando y le voy a dar el diseño que siempre quise.
Un gran saludo y felicitaciones!!
El mejor tutorial que jamás he visto!
Oh, capitán, mi capitán!
Me alegro que el enlace fucnionar, Pau. Las condiciones sirven para cualquier cosa, no hay limitaciones.
Gunner: Me alegro que te sirviera y hacerlo así como quieres, es lo mejor para terminar de entender. No es tan complejo como parece.
No tengo novia:
Gracias por el comentario ... ¿Walt Whitman? :D
muy bueno el tuto!! lo malo es que no tengo mucho tiempo para poder hacer mis propias plantillas pero bueno de a pocos se aprende nop XD ...
muy bueno el tutorial !!
grax por el tuto, oyes, estoy siguiendolo porke me interesa modificar mi blog, ya empezé desde cero, asi ke pss espero me salga bien todo, XD
ya entiendo mejor el HTML, ya ke antez no sabia nada, ajja
oyes kuantos tutoriales son en total, y será ke se puede poner imagenes de fondos en kada seccion, por ejemplo en entradas un tipo en otro otro, etc...
saludos y eres el mejor en esto!!
Sm4C:
En realidad, la idea no es diseñar una plantilla propia sino tratar de entenderla para que todo sea mas sencillo a la hora de modificarla. Todo se aprende de a poco, sobre todo, equivocandose :D
Azuel Firguilera:
Me alegro que te sirviera ¿Cuántos son? No tengo la menor idea, por ahora hay cuatro o cinco publicados. Eso de los fondos con imágenes es uno de los que tengo pendientes, espero tener tiempo para hacerlo a la brevedad.
Gracias por los tutoriales, ya voy entendiendo algo
que me parecia mas dificil que hablar chino.
Un saludo desde Valencia...
Saludos, Antonio; me alegro que te sirvan y el chino se vuelva un poco más comprensible :D
te amo :D
Hola Jmiur, me encanta tu tutorial es muy claro y aprendí bastante gracias a vos.
Pero no entiendo que pasa? Creé un blog desde cero completamente, para no errarle con las modificaciones pero no sé que estaré haciendo mal, porque en la parte de donde se ve el esquema del blog en diseño, la cabecera y el footer se ven cortados, no en el blog sino en el esquema solamente y cuando le bajo los valores de widht se acomodan por ejemplo si pongo al área outer-wapper, al header wrapper y al footer el valor recomendado 980 y al side 390 tal como dijiste me pasa eso de que en el esquema se vean cortados el footer y la header y probe bajando a 960 footer y cabecera respectivamente y ahí se ve bien en el esquema, al parecer me estan sobrando 20 de algo pero no sé dónde? es que soy muy novata y por ahí le sobra un margin en otra parte y no me doy cuenta. este es el blog de prueba que creé si podés le das una vuelta es este http://blogdesde0.blogspot.com/
desde ya mil gracias por todo.
Insomnya:
Lo más importante es que el blog se vea bien cuando lo navegas. En ese sentido, no modifiques la plantilla para que se vea bien en la ventana Elementos de la página ya que esa ventana, sólo es una herramienta interna de Blogger que sirve para editar los elementos pero no tiene relación con la forma en que se ve el blog. Entonces, lo que hay que hacer es que esa herramienta sea util pero nada más.
Si el blog lo ves bien, si las medidas y la distribución te parecen adecuadas, no las cambies para hacer que en la ventana donde se muestra el esquema se vea bien, eso, lo trataremos de corregir de otra manera.
No es sencillo porque esa ventana está mal hecha y es difícil de controlar, hay que probar y encontrar un esquema que sea aceptable y nada más.
Si agregas estas definiciones justo antes de ]]<>/b:skin>, se acomodará bastante. Puedes probar con otras medidas hasta encontrar la que te resulte cómoda. Insisto, recuerda que sólo es un esquema y que no afecta al blog en si mismo:
body#layout #outer-wrapper {margin:0 auto;width:750px;}
body#layout #header-wrapper {margin:0;width:600px;}
body#layout #main-wrapper {padding:5px 0;width:400px;}
body#layout #sidebar-wrapper {padding:5px 0;width:120px;}
body#layout #footer-wrapper {margin:0;width:600px;}
Espero que los códigos sean legibles, cualquier cosa, me mandas un mail y te lo envio por correo.
Listo Gmiur muchas gracias. Ya arreglé lo del esquema, deje los valores como recomendás 980 980 980 560 y 390 en lo que hace a la estructura real del blog al navegarlo y en eso de body layout puse 960 en cabecera y footer respectivamente y 560 y 390 como era. Ahora el esquema se ve perfecto. con lo cual supongo que ya no tendré problemas. Una preguntita más ¿eso de body layout afecta solo al esquema y no al blog 'real'? Es que tengo otro blog con el mismo problema y en unas de esas le agrego esto y asunto arreglado.
Muchas gracias por todo Gmiur.
Exacto. Esas propiedades sólo afectan al la página interna de Blogger y no modifican en absoluto el blog. Es igual para cualquier otro blog si es que los DIVs tienen los mismos nombres.
Puedes colocarlo, quitarlo, cambiarlo y el blog no se modificará en lo absoluto.
Gracias Jmiur !!! super contenta porque al fin voy entendiendo de qué se trata este mundo de códigos que me parecían un misterio inabordable. ahora sí me pongo a solucionar los miles de problemas que tengo en mi blog principal debido a las incontables veces que le he metido mano al código de mi plantilla sin saber bien de que se trataba y de puro ansiosa claro.
Gracias!! Un saludo
Esto es una pasada! Cómo no te busqué antes de modificar mi plantilla??? Me volví loca!
Ahora estoy haciendo un blog de pruebas con la mínima y lo que a mi me costó como 3 o 4 horas tú lo explicas de forma tan facil que quién no lo entendería! no sabía siquiera lo que significaba cada término.
Es una maravilla de tutorial.
Mil gracias. Ya era hora de empezar a entender un poco después de tanto tiempo de trastear y meter la pata :D:D
Veo que diste con la entrada Maite, si con esta explicación no te resulta apaga y vámonos :)
Me alegro que te sirviera, Maite. No es complicado, te confieso que cuando lo hice por primera vez hace ya mucho tiempo, también me volví loco :D
Menos mal que me dijiste que pasase por aqui Gema :D
Genial JMiur, en un día tengo casi toda la plantilla terminada trucos incluidos gracias a vosotros :D
excelentemnte bien gracias mano soy nuevo en esto y me fue d lujo gracias por la ayuda :D
Hola JMuir, una preguntilla, seguro que super fácil pero no consigo ver por qué me sale mal.
Tengo la plantilla, me mide en total 850px pero sin fondos.
Ahora voy a ponerlos y resulta que cuando quiero poner la foto un poco más grande que el contenido para hacer como que todo está dentro de un folio la foto no se me centra respecto al blog no me la centra sino que me sale desde el margen izquierdo hacia la derecha, y claro, sobran unos pixeles.
No se si me explico bien, si quieres te envío una foto para que veas lo mal que me sale?? :D:D
Tendría que haber empezado por fondos y seguir por contenidos, me temo...
Maite:
Tendría que verlo online para responder con exactitud pero, supongo que estás usando la propeidad background para colocar la imagen.
Si es así, por defecto, la posición de la imagen es arriba/izquierda pero, puede modificarse. Por ejemplo:
background: transparent url(laImagen) no-repeat 50% top;
La centrará horizontalemente. Esos dos valores finales indican la posición (50% top)
Por defecto son left top. Pueden ser palabras (left right tiop bottom) porcentajes o valores expresados en pixeles.
¿Algo de esto ayuda?
Pues creía haberlo entendido hasta que me he puesto a hacerlo...
Tenía un $startSide top; así que la imagen se cortaba por la dcha, al quitarlo se ha centrado pero al ocuparme el ancho del blog y la imagen ser más grande se cortaba la dcha e izqda así que le he dado la anchura de la foto y entonces ha salido entera pero desplazada hacia la izda. Parece ser que el 50% o el left no me hacen nada.
la imagen mide 960 y el blog 850.
La dire es esta, no la de mi perfil.
http://metiendolapatapruebas.blogspot.com/
(te doy acceso ahora mismo)
Si te das una vueltilla te lo agradecería un montón !!!!
Pero explicamelo, por favor, porque tengo que entenderlo, esa no es la cabecera que irá definitivamente.
Muchas gracias !!!!!
Maite:
Lo estoy viendo en tu blog de pruebas. Ahora dice esto:
background:#E0E0E0 url(http://........./headerbgwy4.jpg) no-repeat scroll left top;
Si cambio la posición verás algo diferente. Por ejemplo, exageremos:
background:#E0E0E0 url(http://........./headerbgwy4.jpg) no-repeat scroll 80% top;
A medida que aumento el valor de la posición horizontal, voy viendo algo más de lo que estaba oculto a la derecha (se mueve hacia la izquierda).
El problema a resolver es este, la imagen mide 960 pixeles de ancho y el DIV del header 850 pixeles así que siempre sobrará algo. Con las posiciones, lo que hacemos es definir que mostraremos y qué ocultaremos de eso que sobra pero, lo ideal sería tener una imagen que se ajustara al tamaño o sea, que fuera un poco menos ancha o, ampliar el ancho total del blog.
donde tú ves scroll left top yo estoy leyendo $startSide top !!
bueno, no importa, el caso es que creo que te he entendido, voy a hacer la cabecera más pequeña, y lo más seguro que modifique medidas, debí haber empezado primero por las imágenes me temo !!!
Gracias por pasarte por allí !!! :D espero venir para decirte que lo he conseguido :D
PRUEBA SUPERADA!
y más rápido de lo que yo esperaba! si es que con las explicaciones que das todo resulta fácil!
GRACIAS! :D:D
Ya llevaba horas con ésto y no había manera, eres mi héroe jajaja
:( :( se me ha ocurrido abrirlo en el firefox y está el blog a la izquierda del todo! :(
llevo como 1 hora haciendo pruebas y no hay manera de centrarlo.
en el explorer se centra muy bien, como puedo arreglarlo????
Bien. No te preocupes. La solución es sencilla.
En #outer-wrapper, ahora dice:
margin: 0;
cámbialo por:
margin: 0 auto;
y de esa manera, estará centrado en ambos navegadores.
Fiuuuu genial! qué alivio! :D
Hola JM, ayer estaba aburrida así que me puse a hacer esto en blog de pruebas, pero claro vos das las explicaciones para la Mínima, y a mi se me ocurrió agrandar la otra que es modificada y bastante engorrosa por cierto, por ejemplo no tiene #footer-wrapper, solo footer.
Es todo imagenes, así que me tomé el trabajo de agrandarlas a todas, con la consiguiente pérdida de definición, pero bueno eso sería lo de menos, lo que no me gusta es que la sidebar queda demasiado ancha de acuerdo a las medidas que vos das.
La cabecera del costado derecho de la pantalla no se porqué sale algo raro, y el footer obviamente no pude modificarlo porque no lo encuentro, querés mirarlo y me decís que te parece?
Bueno, quieras o no quieras aca va el enlace Pruebas
Alli hay varias cosas. Algunas son fácilmente arreglables otras no.
El tamaño de ambas partes, blog y sidebar se controlan con:
#main-wrapper {
.....
width:550px;
}
#sidebar-wrapper {
.....
width:390px;
}
Para achicar la sidebar se reduce el valor de width y se le suma a main.
Lo que ves en el header, a la derecha es porque la imagen de fondo tiene 962 pixeles de ancho y el header 970 pixeles de ancho así que hay un pedazo que no tiene imagen, por eso ves esa rayita vertical.
Lo el footer-wrapper es indiferente, en la plantilla, existe como DIV pero no tiene propiedades y todas están en ese otro llamado footer. Esa parte en intrascendente.
Ahora bien. La parte importante es que la plantilla tiene un concepto erróneo. Si te fijas, aparecen 4 divs:
<div id="outer-wrapper">
<div id="wrap2">
<div id="outerwrapperbottom-wrap1">
<div id="outerwrapperbottom-wrap2">
Y ACA ESTÁ EL HEADER
ACA MAIN + SIDEBAR
ACA FOOTER
</div>
</div>
</div>
</div>
Hay 4 rectángulos, uno adentro del otro. Eso no tiene mucho sentido. La lógica sería esta:
<div id="outer-wrapper">
<div id="wrap2">
ACA ESTÁ EL HEADER
<div id="outerwrapperbottom-wrap1">
<div id="outerwrapperbottom-wrap2">
ACA MAIN + SIDEBAR
</div>
</div>
ACA FOOTER
</div>
</div>
Siguiendo ese esquema, todo se acomoda com más facilidad.
A ver si puedo meterle mano a esto... lo de la cabecera... si le pongo al header 962 igual que el tamaño de la imagen, se corrige o tengo que agrandar la imagen?
Después te sigo preguntando, mientras voy viendo si puedo hacer algo de esto, nada fácil por cierto :S
Voy a ver si doy con el número que tendría que ponerle a la sidebar y al main... y lo demás...
Si, si, ya está cambiando la medida del header por la misma de la imagen queda perfecto.
Me sigo contestando sola viste?
Pero no te hagas iluciones, tengo y tendré mas preguntas... :D
Para cambiarle las medidas a la sidebar tengo que achicar las imagenes, eso me va a complicar muucho la vida, así que de momento voy a dejarla así.
Voy a ver lo mas complicado eso de los divs y te cuento... retornaré ;)
Acá estoy otra vez "hablando" sola, no pude con el asunto de los div, esa plantilla es chino, vos ves cosas que yo no, esa estructura que decís o es muuuuy larga y no se donde termina, el footer no lo veo en ningún lado (estoy hablando desde dentro de la plantilla con artilugios expandidos ehh), de cualquier forma desde donde dice: div id='outer-wrapper'para abajo hay mil cosas, el main la sidebar y montón de cosas mas, pero el footer, salvo coment footer, no hay otra cosa, pero igual con muchas cosas mezcladas, no se hacer eso... :(
Otro tema... el otro footer, o sea la parte de abajo que se ve en el blog, abajo de todo de la página, hay una especie de imagen que no coincide con las medidas de la plantilla, eso donde está?? :o
A las respuestas que ya contestaste:
SI. cambiar el tamaño del header está bien Tal vez, sería bueno cmbair todos los otros valores es decir si dice 970 poner 962, en outer-wrapper en fotter, etc, así queda "parejito".
SI. cambiar el ancho de la sidebar es engorroso porque hay que cambiar las imágenes. En general, lo recomendables es dejar siempre las imágenes para el final y poner colores de fondo hasta tener todo ajustado.
A las respuestas que no contestaste:
Para ver la distribución, lo mejor es no expandir los artilugios; cada sección se mostrará sólo con un par de líneas y es más sencillo ver donde empiezan y donde terminan. También pueden "moverse" sin problemas. con los artilugios expandidos es casi imposible verlo porque es demasiado largo y es fácil equivocarse.
El footer, ahora n otiene contenido pero si un tamaño y una imagen de fondo que es la que ves abajo de todo (como una raya oscura). Eso, está en el CSS:
#footer {
background: ........;
..............
}
Si querés que no se vea esa imagen, elimina background. Si querés que desaparezca el footer y que no ocupe espacio hasta que lo quieras usar, eliminá también padding-top:10px y height:36px.
Ahí voy a la carga de nuevo, si claro que cambié todas las medidas, soy medio torpe pero no tanto, quedó parejito, parejito, no lo viste?? :D
Ahora voy a ver lo de la distribución, claro era sin expandir... con razón yo veía tantas cosas, era larguísimo eso...
Y veré también lo de css del footer, en un rato te cuento...
Mirá vos lo que era lo del footer... resulta que esa imagen la del footer yo la había agrandado, pero como no pensé que hablabamos del mismo footer-wrapper no le cambié la medida ahí, y estaba chiquita, (esa era la imagen fea que veía)le puse 962 como todo lo demás y se arregló :D
Lo de los div no hubo caso, cada cosa que cambio me tira error de xml, después me voy a fijar como los tengo en Te Propongo, me parece que la vez pasada los cambiamos...
Agrandé la resolución a 1024 x no se cuanto, para verlo y se ve bien, salvo que con mi monitor de 800 las letritas yo ni con lupa claro, era solo para ver como lo verían los demás, vos seguro tenés una resolución mayor, querrías darle una mirada y decirme tu sincera opinión?? ;)
Prueba
Vos ves en la sidebar como una parte de color mas oscuro hacia la derecha de arriba hasta abajo, como si estuviera partida o remendadada? Eso sería la impresión visual ehh... será por la imagen?
Igual estoy jugando un poco, porque hasta después del concurso no puedo cambiarla, también quiero ver de hacer unas imagenes decentes, no lo que hice con Paint (no te rías) que es lo único que se (trabajar es mucho decir no?) usar...
Se ve bien. Lo miro con una resolución de 1024.
Es una plantilla compleja así que mover y ordenar no es fácil, por eso salen esos errores.
Lo de la sidebar y ese tipo de detalles es un tema de imñagenes, al ampliarlas pierden resolución, ciertas partes se ven esfumadas y ese es el efecto visual que ves.
Ahh bueno me quedo mas tranquila si vos lo ves bien está genial ja jaa
Si, tengo que cambiar esas imagenes, imaginate que eran gif, las modifiqué a jpg y después las agrandé, como no se van a estropear?
Se re pixelaron... :D
Ya veré de conseguir alguien que me las haga como debe ser ja jaaa
Gracias ;)
Mirá, como me resultaba muy ancha la sidebar y no quería poner dos por lo de las imagenes, traté, o estoy tratando de poner dos cosas en el ancho, por ej. dos imagenes una al lado de la otra, eso me queda bien, pero al tratar de hacerlo con algún código no se como hacer para que me quede uno al lado del otro, quedan debajo, aunque le puse left a uno y right al otro, nada, con las imagenes no hizo falta le puse el centro donde empezaba una y el centro de cierre al terminar la otra y quedó bien.
Como puedo hacer?, Es para aprovechar el espacio...
Quise decir center... :S
Hola!!! Tengo una duda..... podría mantener el sidebar wraper estático, es decir que cada vez que se habra un link nuevo independiente en el blog por ejemplo un "leer mas" , se actualize todo excepto el sidebar wraper.... tengo un reproductor de musica y cada vez que entrar a un post en particular, la reproducción se repite... :) en fin muchas gracias!
k_nelita:
Si se trata de la primera parte "Mis Blogs y Enlázame", com olas imágenes son todas de diferente tamaño, la mejor forma de organizarlas es colcoarlas en una tabla ya que sini, será muy complicado de alinear. Hablo de este blog.
BtheBlog:
No parece que sea una solución sencilla de conseguir en Blogger. Creo que alguna vez vi una plantilla que funcionaba de esa manera pero me parece que tenía una serie de scripts muy complejos. Nunca más vi algo semejante.
Si era ese blog, puse eso de ejmplo, las imagenes de la segunda fila mas o menos quedan, pero lo del principio no, ya se que es de distinto tamaño, pero no eran precisamente imagenes lo que queía poner, eran los últimos articulos, y no se todo lo demas pero en dos filas como si fueran dos sidebares...
Entonces me puse a tratar de hacerle realmente dos sidebares, imposible!
Ahora lo estoy intentando de puro caprichosa en una minima recién bajada y tampoco puedo, me queda todo debajo del main, ya me estoy poniendo nerviosaaaaa, hace como mas de dos horas que estoy con esto...
Como sería lo de las tablas que decís? No para imagenes solamente sino para todos lo cachivaches que tengo en la sidebar de Te Propongo
Quiero mudar ya el blog a la plantilla grande, pero me sobra mucha sidebar, si me va a quedar todo encolumnado...
Habría que ver detalles pero, una tabla sería esto:
<table style="margin:0 auto;border:none;width:100%" cellspacing="5" cellpadding="0">
<tr>
<td align="center" valign="middle"> LA IMAGEN </td>
<td align="center" valign="middle"> LA IMAGEN </td>
</tr>
<tr>
<td align="center" valign="middle"> LA IMAGEN </td>
<td align="center" valign="middle"> LA IMAGEN </td>
</tr>
</table>
Ahá... pero si no son solo imagenes? Son muchas cosas... estoy estudiando esto de las dos columnas del mismo lado, me parece que me había saltado un paso del tuto anterior por eso no me salía, pero igual no lo entiendo bien, porque donde das el código que hay que poner sobre la sidebar area entre medio hay (...) eso no se pone en la plantilla, por eso no entiendo...
Igual gracias, voy a ver si sigo estudiando cualquier cosa sigo molestando ja ja :D
No, claro, los puntos suspensivos no se ponen, lo único que se muestra allí es cuales son las diferencias o cuales son los combios a hacer, el resto queda igual.
Alinear horizontal y verticalemente contenido de diferente tamaño, solo se consigue por tres métodos: una tabla, divs contenedores que floten o por casualidad :D
JMiur ya habia posteado esta pregunta pero no hallo en donde esta... puedo mantener el sidebarwrapper estatico que no se actualize cada vez que se actualize la pagina?
Recuerdo la pregunta y la respuesta, en principio es no o por lo menos, no he visto nunca nada similar. No sería sencillo de hacer en Blogger.
bueno primero agradezco el tutorial ps bienj sencillo que se ve pero me ha resultado un error al cargar los cambios en la plantilla me dice:
´´Se ha encontrado más de un artilugio con el ID: HTML2. Los ID de artilugio deben ser exclusivos.´´
agradezco cualquier solucion ps me hurge darle una mejor presentacion a mi blogg
PD: segui paso a paso tus indicaciones incluso la plantilla minima
JeanPaul:
Eso es un error de Blogger. Suele ocurrir cuando cambiamos una plantilla por otra. Algo de eso puedes ver en este post.
LA solución simple es buscar en el código HTML2; vas a ver que se muestra dos veces (Blogger lo repite) y cambiar cualquiera de ellos por otro nombre, por ejemplo HTML22, guardas y continuas. Esto, puede ocurrir varias veces con otros elementos y se sigue haciendo lo mismo hasta que ya no da error.
OHH!!! OK Muchas gracias JMIUr! SALUDOS muchisisismos!
Eso me ha pasado que me decía que el artilugio html1 o 2 o lo que fuera estaba repetido, y le cambiaba el número y me salía otro, y así hasta que tuve que cambiarle casi todos jaja
Así que el mal...dichoso Blogger hace esa jugarreta?
Yo no lo sabía pero igual los fui cambiando, de puro audáz que soy :D
Y me quedó bien, ja, le gané ;)
Sí. Es un error de Blogger, pasa siempre :D
hola jmiur, muchas gracias por toda tu ayuda, tengo un problema, hice todos los pasos, pero en la parte de content wrapper no me sale alado del main wrapper como debería de ser, sino que me sale hasta abajo, y quiero ponerlo de lado derecho, cómo le hago??
gracias
Expliácme un poco más. El content-wrapper es todo, post+sidebars, main son los posts. Si se trata de http://elmundodelsilencio-anna.blogspot.com/ no veo nada malo pero no termino de entender bien la pregunta ¿queires que estén invertidos, la sidebar a la izquierda y los posts a la derecha?
gracias jmiur, ya logré hacerlo, tenía un problema con la distribución de los elementos, pero logré bajarle a los pixeles en el main wrapper, y pude hacer que el slide bar quede a la derecha, porque me quedaba hasta abajo. En fin, soy nueva en esto, es mi primera vez, y creo que pude lograrlo, gracias por tu blog, me sirvió de mucho, y espero que próximamente, pongas mas cosas como para escoger el estilo, el color, y el diseño...
Muchas graciassss!!!!!!!!!!
anna
Ahora entendí. Seguramente lo mirabas en IE, eso no me fijé. La solución es esa, disminuir el ancho un poco porque en IE hay un borde en el navegador lo que hace que el total disponible sea un poco menor,
Gracias, la verdad quisiera saber mas sobre las plantillas, como personalizarlas, el diseño, color, etc...
gracias
JMiur, ¿cómo puedo hacerte llegar un jamón? :D Llevaba toda la tarde para modificar una plantilla de tres columnas sin resultado, hasta que me acordé de esta entrada, aplicarla y ale hop, resuelto en cinco minutos escasos.
Una vez más, te muestro públicamente mi admiración.
Recibe un cordial saludo,
Max.
Me alegro, Max :D
La tecnología aún está muy atrasada y no permite el envio de jamones como adjuntos .. es una pena :D
jajajaja de ser así tendrías cerditos revoloteando a tu alrededor.
Bueno, quizás la palabra no sería revoloteando :O
Oh no, espero que se queden quietitos para hincarles el diente :D
muchas gracias...
Una pregunta, coloqué una imagen en la cabecera de mi blog, la imagen es un png con fondo transparente, hice que la imagen quede centrada en la página y como es más grande que el resto del cuerpo del blog la imágen tiene partes que sobresalen hacia el borde exterior, esto me da un excelente efecto a la cabecera pero sólo en mozzila firefox. mi pregunta es: puedo hacer que esto de resultado tambien en IE?
Por lo que vi, ni en IE7 ni en IE8 se corta, se ve completa. En todo caso, podrías aumentar el ancho el header para que coincida con el ancho de la imagen:
#header-wrapper {
.........
width:785px;
}
ya eso lo hice el problema creo que está en un margen que le añadí con valor negativo que no parecen aceptar versiones anteriores del IE, (lo ví en una maquina diferente con internet explorer 6 y se ve cortado), la pregunta es si existe alguna manera de corregir este detalle (aca en venezuela la gente aun usa mucho el IE6) para asegurarme de que mi portafolio pueda verlo todo el mundo, te lo agradezco de antemano.
Aca te dejo el script que usé:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:1061px;
margin-left:-130px;
}
#header-inner {
background:url(http://img413.imageshack.us/my.php?image=cabacera.jpg
) top center no-repeat fixed;
margin-left: 0;
margin-right: 0;
}
En el blog que veo, las propeidades dicen otra cosa:
#header-wrapper {
border:1px solid #FFFFFF;
margin:0 auto 10px;
width:660px;
}
En eso que colocas, la URL de la imagen es errónea:
http://img413.imageshack.us/my.php?image=cabacera.jpg
Esa es la URL de la página web pero no el enlace directo.
Jajajaja, lo siento me equivoque, es que actualicé las imágenes, pero lo que me interesa es esto:
#header-wrapper {
width:970px;
margin-left:-69px;
}
el márgen es de -69 píxeles, eso hace que sobresalga esa cantidad de imimagen por ambos lados, el problema es que se desordena cuando se ve en IE6, no se, si me pudieras aayudar con eso sería genial, de pana soy nuevo en esto y no se como hacerlo yo pero una vez que aprendo lo aprovecho y de nuevo agradezco de antemano.
Por cierto, de los dos blogs es este: http://mercuriocromo-ve.blogspot.com/
disculpa la ladilla (fastidio) :-)
Si. Lo veo. Pero no hay forma en que pueda intentar resolver eso en IE6. En cualquier otra versión psoterior se ve bien.
Me alegro que sirviera :D
Muchas gracias! Muy bueno! Pero me quedó algo sin resolver, que ni siquiera sé si se puede. Puedo tener las entradas paralelas a la cabecera? No sé si me explico. Quiero que la cabecera esté arriba a la izquierda (esto ya lo legré) pero también quiero que las entradas aparezcan cetradas arriba, al lado de la cabecera. Se puede??? Cómo hago???
No lo comprendo con exactitud, ¿podrías mostrarme algún dibujo, un boceto, algo pera ver si me doy cuenta de la idea?
perdon tengo un problema aver en que parte tengo que cambiar el hancho de footer-wrapper los hice mas o menos con tu paso aumento todo pero cuando cambien el aumento de footer-wrapper me desaparecio la imagen de fondo del blog.
solo necesito la indicacion o si tengo que hacer algo mas para que no desaparesca el fondo oks.
http://wowarnion.blogspot.com/
pasate y lo ves aver si con vuestra ayuda creo un buen blog ahora tengo ideas pero no se si llegara a dejar hacer tantas cosas para que me ayudes un poco y responder mas a mis preguntas puedes dejarme tu msn esque es mi primera vez xD y quiero aprender hay muchas ganas de saber es un reto para mi. BSS
ufff que torpe no leei bien perdona por que escriba otro comentario pero ya vi la solucion jaja perdon no sabia que habia que reemplazarlo por otro como dices hay xD
:D
simplemente makanudo
Genial Explicación !!!!
Hubiera tenido algo como esto cuando comencé a lidiar con Blogger, me hubiera ahorrado mucho tiempo. Terminé aprendiéndolo haciendo pruebas y cometiendo errores, pero sin duda tu post me es de ayuda. Nunca consigo dar con una plantilla que me siente bien, por lo que tengo que estar cambiando medidas, tanto en Blogger como en Wordpress.
Gracias, un saludo
Saludos Pablo. Pués, haciendo pruebas y equivocándose, es como hemos aprendido todos :D Y lo seguiremos haciendo :D
Es excelente esta 1er parte del tutorial...la verdad que es muy clara y consisa!!! :D
Muchisimas Gracias por esta explicacion! :)
LoQra!
Realmente bien explicado. Mejor imposible. Gracias.
Buen Dia Jmiur! tengo un problema q de seguro usted me ayudara a resolver: hace unos dias cambie la plantilla en mi blog, el ancho de las entradas en esta ahora es el mismo que el de su blog coincidencialmente, pero hay un problema que no se si se deba a un error en la plantilla, al publicar entradas con imagenes, estas por mas que las centro e incluso he intentado con "center" "/center" el hecho es que al publicarlas se van hacia la izquierda o a la derecha mezclandose con el texto creando todo un desorden e irrespetando la alineacion establecida. De antemano gracias por la ayuda que me pueda brindar...
enriquenava.com.ve
Enrique:
Fíjate que en la plantilla, debe decir algo así:
.entry-content img {
border:1px solid #666666;
float:left;
margin:10px 10px 10px 0;
padding:2px;
}
eso de float:left; es lo que hace que todas las imágenes floten a la izquierda, sin importarr lo que coloques en las entradas; deberías eliminar esa propiedad. Lo mismo puedes hacer con margin para que no se agreguen márgenes extras por defecto cada vez que colcoas una imagen.
Efectivamente, ud. es un maestro, de verdad que si, tambien elimine margin como me sugirio, ya me preguntaba el por que ese espacio de la nada... Gracias nuevamente me saca de otro problema... Saludos!!!
Muchas gracias por toda la interesante y valiosa información que publicas en este blog, me ha servido de mucha ayuda. Gracias.
Saludos.
interesante
EXCELENTE POST TE LO AGRADEZCO ME A SERVIDO MUCHO...... YA TENGO OTRAS COSAS Q HACERLE A MI WEBSITE...... AHORA SOLO KIERO PONER EN EL BLOG LA PLANTILLA QUE HE ECHO EN DREAMWEAVER PERO NO SE COMO LOGRARLO SI ME AYUDAS TE LO AGRADECERE MI EMAIL ES maltez83@marlonamltez.com y mi pag www.marlonmaltez.com te invito y me dices q puedo cambiarle......
maltez: Eso no puedo hacerlo, no es mi oficio.
muchas gracias sos un genio me has ayudado mucho
yo tengo una duda, no se si he hecho algo mal pero el apartado de "elementos de la pagina" se ha alargado un trozo grande hacia la derecha
que puede haber pasado? GRACIAS
E difícil de saber, no hay forma de leer eso online; algunas propiedades de la plantilla afectan esa parte aunque no afectan al blog en si mismo.
INCREIBLE, QUE GRAN EXPLICACIÓN, PARA INEPTOS, NO HAY DISCULPAS QUE VALGAN, EL QUE NO SEA CAPAZ QUE SE DEDIQUE A OTRA COSA.......
Perdona mi ignorancia pero el codigo que tiene la plantilla ke kiero modificar es este:
#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}
#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}
Y el ke tu pides que busquemos es este:
#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}
si los cambio la plantilla no funcion
lo intente con varias las plantillas de blogger alomejor lo hago con la plantilla equivocada ,,, no se
Zeukrob:
$startSide equivale a left; es una forma de Blogger de escribir lo mismo. Así que "traducida", tu plantilla dice esto:
#footer {
clear: left;
margin: 0;
padding: 0 20px;
border: 0;
text-align: left;
border-top: 1px solid #f9f9f9;
}
diferencias, pocas:
clear: left; en lugar de clear: both; sirve para limpiar flotaciones anteriores y que estas no afecten; prefiero usar both en lugar de left ya que las flotaciones pueden ser a izquierda o derecha y both, limpia ambas; no hay cambios evidentes
margin: 0; en lugar de margin: 0 auto; aquí, auto hace que se centre el fotter en la pantalla pero, para eso debe tener un ancho establecido que, en el ejemplo que muestras, no tiene
padding-top, line-height, text-transform, letter-spacing, text-align son todas propiedades opativas, separacion entre lo de arriba y abajo y formatos de textos.
#footer .widget son las propiedades de los widgets que agregas.
Tendría que ver el ejemplo online y saber cuál es el resultado que quieres obtener.
JMiur, tengo que hacerle el blog a una amiga y eligío, dezembro1.
http://btemplates.com/2009/01/07/dezembro-1/demo/ .Gracias a la página que da la posiblilidad de ver en las diferentes resoluciones ( cosa genial!!!!) me di cuenta que era para una resolución de pantalla mayor de la común en uso que es 1024 x 768, se puede achicar??????? Como?
Gracias :D
Me resultó todo salvo cambiar los colores de cada cuadrito, como lo pusiste en el ejemplo. ¡Cómo lo hago?, me puede ayudar porfavor.
Gracias
La hormiguita:
Todo es posible, lo que ocurre es que en esa plantilla, hay una imagen de fondo:
http://1.bp.blogspot.com/_0CLPmP1ydOo/SWRGOz0L5YI/AAAAAAAAAAU/JwY_VRTKeSg/s1600/wrap.png
que mide 1280 de ancho y esa imagen es la que debería ser redimensionada primero que nada, antes de cambair los anchos de los divs.
Cata:
No sé exactamente a cuales te refieres, por ejemplo, en tu blog, veo:
#outer-wrapper {
.......
background:#765AA5;
}
que es el color de fondo de uno, del rectángiulo mas grande.
Con cualquier otra aprte haces lo mismo, agregar background o background-color. Si no está definicido, simplemente lo defines y lo colocas con el resto del CSS, por ejemplo:
#content-wrapper { background-color: red; }
Hace una semana qe vengo luchando para agregar otra columna, una arriba de la otra, casi me vuelvo loca u.u gracias por la info me re ayudooo :D
Me alegro que sirviera, Micaela :)
:o gracias, es lo que me pasaba amí
Hola bueno yo soy nueva con esto de los blogs apenas ayer me hice uno a si que por lo tanto no se nada, así que me gustaria que me dijera si para hacer todo lo que dice necesito llevar un curso o lo puedo hacer solo sigiendo los pasos. ah y tambien me gustaria saber si me puedes ayudar es que quiero subir un video a mi blog pero pesa 145MB asi que no puedo subirlo ya que el limite es de 100MB y me gustaria subirlo como suben los video en este blog:http://naruto-shippuden-capitulos.blogspot.com/2009/10/naruto-shippuden-capitulo-130-sub.html en la opcion 1 ¿como lo puedo subir? si me pudiera ayudar se lo agradeseria mucho Gracias.
Kim:
No es necesario seguir cursos en absoluto, sólo tener paciencia, practicar y no pretender beber todo de golpe para no atragantarnos. Hay que ir paso a paso.
Una buena idea, por ejemplo, es que crees un segundo blog de pruebas y allí coloques una copia de tu plantilla. En ese blog de pruebas, puedes jugar, modificar y equivocarte sin temor a que el blog original quede destruido. Es la mejor forma de aprender y, no te preocupes si algo sale mal: SIEMPRE algo nos sale mal y SIEMPRE nos equivocaremos una y mil veces.
Respecto del video, lo que pudes hacer es subirlo a otro servicio como YouTube y ellos, te darán el código para insertarlo en el blog. Eso es sencillo, solo debes copiarlo y pegarlo.
lo mejor... uff una nota encontrar este blog!!! GRACIASSSSSSSSSSSSSSSSSSSS
una pregunta... puedes editar una plantilla en el dreamweaver y pegarla en el blog? es posible eso :D?
Depende de lo que eso signifique. Una plantilla de Blogger no es HTML puro sino XML y por lo tanto, no hay otro servidor que pueda ejecutar esos códigos; si colocas una plantilla de Blogger en Dreamweaver e intentas previsualizarla, no verás casi nada.
Hola JMiur:
Como estas? Espero que bien...
Yo no entiendo nada de HTML y todo eso, pero me gustaria que mi blogger fuera un poco mas hancho; si yo te pasara por mail, la plantilla de mi blogger, tu podrias hacerle los cambios correspondientes para que mi blog, quedara mas hancho?
A la espera de tu respuesta, saluda muy cordialmente.
Guillermo
Mi Mail: guilleacons@gmail.com
No, eso es algo que no puedo hacer, no es mi oficio.
mil gracias, está genialmente explicado :D y he conseguido cambiar los tamaños que es algo que de primeras no me gustaba
muchas gracias!!!
Gracias, me esta sirviendo bastante todos estos datos que das. Ya deforme mi blog un monton
JMiur, tengo un problemas hace un largo par de semanas. Comenzó cuando quise agregar a mi plantilla el código de Comentarios con LightWindow.
Ese día noté un cambio. Pensé que había sido un error mío, así que instalé una Mínima y empecé de cero, pero hete aquí que el problema continuó. En los elementos de página veía cualquier cosa.
Hoy sencillamente fue el colmo; esto es lo que veo en "Elementos de Página": http://goo.gl/7and
Pero mi blog, está bien: Enterjared (sin tocar)
Qué es? Sugerencias? Acaso Blogger se conspira en mi contra o le ha pasado a otra gente?
Jared:
No es algo que pueda responderte; sólo puede verse usando la misma plantilla; debe ser alguna propiedad display o position de un elemento agregado o de un código específico.
gracias por todo lo as explicado muy bien :)
Era justo lo que yo necesitaba. Sos un capo!!!!
elflacoteniaunblog.blogspot.com
Chiiiiiiiiiicos!!!
habéis visto el diseñador de plantillas que hay para blogger???
http://draft.blogger.com
mola un huevo! además complementado con este tutorial ya ahorramos un mogollón de tiempo.
Lo encontré buscando información sobre como crear un blog desde cero y mira por donde, encontré esta maravilla tan escondida que estaba la jodía...
tenéis que probarlo. Al menos para poner el diseño base (p.e. 3 columnas, cambiar anchos, CSS, imagen de fondo, etc.) va de coña. Y luego si se quiere hacer algún cambio más pues ya consultamos con tu gran tutorial para terminar de perfilar.
¿Ves? eso es lo bueno de repetir todos una misma noticia porque no siempre llega a todo el mundo en mismo momento y de la misma forma.
Los que se quejan diciendo que somos repetitivos deberían ver el comentario de María José, le ha molado un huevo el diseñador de páginas :D
Me encanta! se expresa libremente como debe ser.
Todos descubrimos la rueda :D Eso es bueno :D
Lo malo es que a veces, algunos le ponen copyright :D
Tengo problemas, porque cuando lo hago grande, me sale como un rectangulo a la derecha de cada espacio, pero ahi no se expande el texto ni nada.
Una imagen vale mas que mil palabras :
http://s4.subirimagenes.com/imagen/previo/thump_4316117blog.png
Y si lo quieres ver directamente del blog :
http://todosondescargas.blogspot.com/
Te falta cambiar varios anchos más. Debes eliminar o modificar la propiedad width de las siguientes definiciones:
.main .Blog { ... width:484px; ... }
.main .widget { ... width:468px; ... }
#main { ... width:485px; ... }
Además, en esa plantilla, los fondos son imágenes así que, seguramente, deberás modificar estas:
http://www.blogblog.com/rounders3/rails_main.gif
http://www1.blogblog.com/rounders3/corners_main_top.gif
http://www1.blogblog.com/rounders3/corners_main_bot.gif
De momento consegui que el texto se me viera en todo el hueco, pero aun no he conseguido que una linea que aparece que me imagino que sera lo d rails_main se ponga mas a la derecha y que los corners main top y bot se pongan tambien mas a la derecha. Voy a seguir probando !!
Grax por las ayudas
Hola Jmiur, quisiera saber como agregar una sidebar en la parte derecha como la que dice ''sidebar wrapper'' ya que en la plantilla que te mencionaba anteriormente no esta, o solo dice sidebar, pero no me da la opcion de AGREGAR UN GADGET. Saludos.
Y sigo sin saber cual es esa plantilla.
:O http://borest-borest-net.blogspot.com es la que se usa en ese blog, olvide eso :S. Saludos.
El nombre que se le de al ID es indiferente siempre y cuandos es sepa cuál es. Mucho detalle sobre eso no puedo darte, cada plantilla es diferente. Fíjate en esta entrada para entender el concepto.
¿En qué es mejor que las demás la Minima? ¿Cómo sé en qué plantilla está basada la que uso?
Creo que tengo una pequeña idea sobre los id's, pero en realidad no tengo una id de sidebar wrapper, creo que el diseñador de la plantilla puso todo para que se editara dentro de la edicion HTML, y no por Elementos de la pagina, lo cual no me gusta mucho, porque no tengo idea de como agregar la parte de las etiquetas ni esas cosas que se usan de obligación. Aun asi muchas gracias por la ayuda. Saludos.
Sois los dioses, LOS DIOSES
Magnifico tutorial, varios meses tratando, es la mejor explicación, gracias por tu tiempo, es admirable tu servicio.
Excelente explicación, yo creo q voy muy rápido pero quisiera consultarte como se hace para poder poner el icono en la url del blog. muchas gracias. Un saludo
Eso es lo que se llama un favicon, Para agregarlo, fíjate en esta entrada y en esta otra.
Me ha encantado, lo he ido modificando a medida que leía, en un blog de pruebas y me ha salido perfecto. Eres un genio, gracias por este tutorial. Saludos :)
Perfecto, SaaRaaH...
MUy bueno broer gracias por el tuto y lo bueno q me funciono muy bien en mi blog ya q antes con i.e se distribuian mal los elementos pero con este tuto lo arrgle y tiene el mismo aspecto dede I.E y Firefox nuevamente gracias brother
Atte.
NaviMaster
http://navixd.blogspot.com
¿Porqué a mí no me funciona? Si introduzco "div" or "body", me aparece un mensaje que dice que estos no están permitidos.
No sé qué quieres colocar, ni donde lo quieres colocar.
Tengo problemas con mi nueva y descargada plantilla.
1. La página principal me deforma las imágenes y pone la letra más grande, es diferente si le hago click, porque ahí salen tal como las quiero, en ese caso me gustaría ensanchar las dos columnas del inicio la de las entradas y la acompañante, a ver si así se ve mejor.
2. Quiero cambiar el lugar y tamaño y front de mi título pero no puedo hacerlo, además está unido a un pie de página o descripción que me queda en mal lugar, justo tapando una lunita
cuentosprimero.blogspot.com
Lo que ocurre con las fuentes de texto es que el tamaño lo defines en las mismas entradas agragándoles estilo pero, en el home, usas un script para mostrar los posts de manera resumida y ese script, elimina las etiquetas HTML por lo tanto, desaparece el tamano de la fuente. Lo que deberías ahcer es establecer una fuente genérica para los posts y luego, eventualmente, cambiar en las entradas pero, sabiendo que ese cambio no se reflejará en el home.
.post-body { ... aqui colocas el tamaño de la fuente por defecto ... }
A ver si entendí lo del título. Quieres ubicarlo en forma más prcisa, lo mismo que la descripción. Para eso, ya tienes una aprte armada pero, no la estás usando. Primero, agrega lo siguiente:
#header-wrapper {
.............
position:relative;
}
Luego, como ya has agaregado la propiedad position: absolute en als dos etiquetas que quieres ubicar, elimina de ellas los márgenes y paddings y luego, usa top left right o bottom para ubicar esos textos en cualquier parte del rectángulo del header. Un ejemplo:
h1.title {
color:#FFF;
font-size:85%;
line-height:1.2em;
margin:0;
padding:0;
position:absolute;
left:420px;
top:85px;
}
#header .description {
color:#FFF;
display:block;
font-size:50%;
left:200px;
line-height:1.4em;
margin:0;
padding:0;
position:absolute;
top:30px;
}
Si, intentaré lo del título, pero creo que no me expliqué bien con eso de la letra.
Lo que sucede es que, si te metes al blog y miras lo primero que se ve es que la imagen se deforma porque el post está como en zoom, por eso la letra se ve más grande también. Lo que quiero hacer es:
1. Que las entradas se vean normales, es decir sin ese zoom q pareciera tener, q las imagenes se vean normales, y quitarle eso de leer más....
2. ensanchar el lugar de la entrada q no se como se llama postfooter???`porke ensanché claro pero solo lo escrito, y como debajo va una imagen blanca que es lo que leda el 'toque' eso no lo pude hacer... quiero ensanchar las dos columnas blancas y arreglarles los márgenes, porque la colmna de la derecha tiene mal centradas las imagenes y poco margen entre un elemento y otro.
Lamento ser tan lenta, pero me cuesta un poco lo del html...
espero haberme explicado mejor :)
La lentitud es lo de menos, no hay problema. Lo importante es que nos vayamos entendiendo y miremos lo mismo :D
A ver. Tomo cosas sueltas.
Las imágenes tienen lo que llamas un zoom, eso es verdad, tomo como ejemplo El Dinosaurio. Miro el código fuente y allí, veo que el código dice justamente eso:
<img width="100" height="200" border="0" src="........dino.jpg">
Es decir, esa imagen mide 84x168, pero en la entrada, al insertarla, se establece a width y height con ciertos valores diferentes al tamaño real y eso hace que se la vea "deformada". Sólo se puede resolver en la entrada misma, debe quitarse width="100" height="200" o bien, ponerle el valor real: width="84" height="168"; es la única forma ya que con CSS no hay forma de modificarlo; lo que dice la etiqueta siempre tiene prioridad.
Leer Más. En este momento, no veo ninguno, tal vez ya lo has sacado.
Ensanchar el espacio disponible para las entradas o para el contenido de la sidebar de la derecha es posible pero, te vas a topar con un problema importante; el blog usa tres imágenes de fondo; de arriba hacia abajo son estas:
http://4.bp.blogspot.com/_yCA1gGtzYzo/S6KbrQXCuZI/AAAAAAAACPo/5f025kKrzS4/s1600/cuentos+denEN.png
http://2.bp.blogspot.com/_yCA1gGtzYzo/S6KbH0maF0I/AAAAAAAACPg/eO9l6kpM0YI/s1600/centrocuentosdenoche.png
http://1.bp.blogspot.com/_yCA1gGtzYzo/S6KfzTSbFNI/AAAAAAAACQY/V-JJluWw3_o/s1600/foocuentnIE.PNG
Y son esas imágenes las que definen los anchos. Podrííamos aumentarlos pero, los textos o los contenidos no quedarían dentro de esos dos espacios en blanco, se irían para "afuera" ocupando las partes negras así que para ampliar (ya sea anchos o márgenes) vas a tener que modificar esas imágenes y cambiarlas; luego, recién entonces, se podrían buscar las propiedades CSS necesarias para reacomodar las cosas.
Estimado JMiur:
Redundo sobre lo dicho por otros comentaristas: ¡Excelente tutorial! Soy nuevo en el mundo de los blogs. Con tu ayuda esto se hace realmente fácil.
Por cierto, te comento que leí tu biografía no autorizada y debo decir que te felicito por el excelente gusto musical.
Saludos desde Perú,
Alex
Gracias por el comentario, Alexanco :-$
hola JMiur, hoy me he puesto mano a la obra para modificar la plantilla y pasarla a 980, y lo he conseguido en parte, el problema es la cabecera la imagen se ha desplazado a la izquierda y no ha quedado centrada, algo he hecho mal o no lo hecho, podrias ayudarme.gracias.
este es el blog:
http://carmona-clubdelectura.blogspot.com/
saludos
Juan:
Si expandes los artilugios, ¿logras ver el DIV llamado id="header-inner"? Dice algo así (es lo que dice el códigi fuente y no la plantilla, claro) :
<div style="............" id="header-inner">
Ahí, en style, hay una propiedad que ahora dice background-position: left center;
Para centrar la imagen, cámbiala a:
background-position: center center;
HOLA jMiur que tal disculpa mi ignorancia pero la plantilla que descargue para mi blog de pruebas pues la estoy editando y le aumente el ancho del main wrapper y funciono ,pero tiene un fondo el cual no aumento¿Me podrias ayudar porfavor a aumentar el ancho de la imagen de fondo del main wrapper? y la otra duda esque al aumentar el main wrapper yo disminui la anchura del sidebar y mira lo que paso se redujo ,pero se fue hasta el fondo ,lo que quiero es que este pues arriba ,yo quiero copiar el diseño del blog: http://naruto-full-anime.blogspot.com/ porque afin de cuentas tengo la misma plantillas .PORFAVOR AYUDAME MUCHAS GRACIAS
PD:En mis otros blogs soy orochimarusama
Megacharrin:
Para eso, debes descargar las imágenes, editarlas, volverlas a subir y cambiar las URL que ahora son:
http://i812.photobucket.com/albums/zz46/narutofullanime/MBmid01.png
http://i812.photobucket.com/albums/zz46/narutofullanime/MBmid01.png
http://i812.photobucket.com/albums/zz46/narutofullanime/MBbottom01.png
y que entan como fondos en:
#content-wrapper .NBcontent .NBcontenttop {...}
#content-wrapper .NBcontent .NBcontentmid {...}
#content-wrapper .NBcontent .NBcontentbottom {...}
Saludos Jmiur, primero que todo, gracia por esta serie de tutoriales para modificar la plantilla, me han sido de mucha ayuda...
Pero hay algo que nose como solucionar... sucede que al visualizar mi blog en Explore todo el Content-Wrapper sube, y toda la parte superior del blog se mescla...
ESTE es el Blog. Si sabes la forma de solucionarlo por favor ayudame :X
Eso, seguramente ocurre en versiones inferiores a IE8. Vas a tener que cambair cosas.
En #header-wrapper agregar clear:both;
En #menu agregar clear:both; y poner el margen superior ahi y no adentro:
#menu {
.............
margin-top:120px;
}
En el interior, quitar el margen superior:
#catnav, #catnav ul {
...........
margin:0 15px;
}
Muchas gracias JMiur !!!!
Ahí esta OK ! :D
Muchas gracias.
Genial que alguien explique con ejemplos que funcionan, necesitaba a gritos esta ayuda.
Hola, quisiera saber porque en mi plantilla mínima no tengo la pestaña Elementos de la página, ¿puedo agregarla de algún modo?.
Otra duda que me surge, estoy comenzando y estoy más perdida ... es porque no aparece en la pestaña HTML, definiendo el área que contiene el CSS, ni el b:skin ni el /b:skin.
Agradecería tu ayuda.
La pestaña Elementos de la pagina no es parte de ninguna plantilla sin ode Blogger mismo. Es la primera ventana que ves cuando haces click en Diseño.
Si vas a Diseño y haces click en Edición de HTML, allí lo verás, es otra de esas cosas que tienen todas las plantillas; es parte del código que Blogger agrega siempre y no puede eliminarse.
Hola JMiur, la pestaña Elementos de la página no aparece como no tengo la pestaña Diseño, entro en Personalizar y voy a una pantalla donde hago clic en Plantilla y se ven tres pestañas, una es Edición de HTML, otra Elegir plantilla clásica y la tercera personalizar diseño que si entro allí la plantilla se llama sencillo que no es la mínima, por eso la pregunta anterior, creí que podría ser por los cambios que ha hecho Google últimamente.
Con respecto a la segunda parte en Edición del HTML no aparece la frase b:skin sino una como b:style me pregunto si son equivalentes.
Gracias por ayudar a los que estamos comenzando.
Mabel:
Realmente me confunde lo que describes que ves. Esta es una captura de las pestañas del escritorio de Blogger; no varia con las plantillas, siempre es igual.
Si este es tu blog:
http://aprenderandando.blogspot.com/
Tiene una plantilla normal y allí deberías leer esto porque es lo que se ve en el código fuente de tu blog:
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 3
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Estimado JMiur, resulta que quise cambiar la plantilla porque no podía ampliarla, entonces cree otro blog que se llama aprender probando y cuya dirección es probaryaprender, no lo puse en mi perfil, y es allí donde tengo estas cuestiones que te comento, porque quiero aprender desde cero y no que Bloger me diseñe mi blog.
Gracias por tus respuestas, y espero poder descifrar este mundo de códigos y áreas.
Dime la URL de ese blog porque tengo mis dudas. Si n oquieres hacerla pública, mándala por mail.
JMiur otra vez preguntando, tengo dos cuestiones, una es que si hago lo que dices sobre la navbar desaparece entonces cómo hago para ir al escritorio o para comenzar una entrada nueva ?
La otra cuestión es que siguiendo la sugerencia de ver como sale en los otros navegadores, me pasa lo siguiente, yo navego con Google Chrome y al mirar mi blog tanto en IE como en FireFox no sale el video, aparece un espacio en blanco. Te aclaro que el vídeo lo subi a YouTube primero y luego puse la dirección en el blog.
Te agradecería si pudieras decirme que hacer en ambos casos.
Saludos
Mabel:
Hay muchas formas de acceder sin necesidad de usar la navbar. La más simple es agregar la dirección a los marcadores del navegador. Otra forma es crear algún gadget como el que se explica en esta entrada.
Respecto del video, ¿cuál es? Necesitaría saber la URL de la entrada donde lo hayas puesto.
Hola JMiur, la dirección de la entrada, si entiendo bien es la del blog de prueba que te envié vía mail, donde tengo una sola entrada ya que estoy probando la plantilla, si te refieres a la dirección del vídeo que puse en esa entrada es esta
http://www.youtube.com/watch?v=KYfrVZ3xBB8
espero haber entendido tu requerimiento.
Como siempre gracias.
Mabel:
Claro, no se me ocurrió mirar ahi :$
Por lo que se ve en el código fuente, el código del post debe ser erróneo. Voy a mandártelo por correo tal como lo da YouTube porque es un poco engorroso copiarlo acá.
Hola, tendrás el .xml de la plantilla minima de tu ejemplo si la tienes me la mandas por correo o si pudieras poner algún enlace para descargarla. saludos
oye men ala proxima lo puedes acer e español ke no entendi:)
no men, por la forma en que escribes, dudo mucho que pueda escribir en algún idioma que entiendas
tal vez ... una lobotomía ...
Impresionante, muchas gracias por la información, por mas que veo plantillas no me agrada ninguna así que me tocara ponerme a ello.
por faaa
dimeee en donde consigoo plantillas css no pudo desgargarlas ami diseño me dice qq hay errorr
No sé a que te refieres con "plantillas CSS". En Blogger, debes usar plantillas para ese sistema y si no, editarlas manualmente.
nada de los comandos o como se llame eso, me sale
debe ser porq las plantillas son nuevas?
hay alguna forma de cambiar el codigo html por el anterior
Todo lo esxplciado acás se basa en la plantilla mínima asi que, simplemente, usa esa plantilla mínima. El ancho de las palntillas neuvas se define con el editor de plantillas.
Mil gracias por todos estos tutoriales, venía yo toda chula a rediseñarme el blog (con eso de que he hecho varias webs), pues es
que venía yo toda convencida a esto de bloggear, y mira que sino llega
a ser por tus tutoriales... no sé como me va!!!
Bueno, eso que muchas gracias simpático.
La fotomatona.
Desde que empecé a crear mi primer blog hace 3 años, siempre tenía esa duda de si o no ensanchar mi plantilla porque tenía miedo de provocar problemas de visualización, no solamente a mi sino tambien mis amigos y ahora leer esta entrada me ha ayudado bastante.
Por cierto, JMiur, hay un código de Outer-wrapper (width e IE) de mi plantilla que me sigue pareciendo inquietante, serías tan amable de explicarme su función y posibles consecuencias? supongo que IE es abreviatura de Internet Explorer.
#outer-wrapper {
.....
/*_width: 760px;*/ /* IE hack */
.....
}
* html #page { width: 760px } /* IE hack */
Son hacks para Internet Explorer. teóricamente, establecen valores distintos en ese navegador ya que los demás ignoran la propiedad porque tiene un caracter _ delante e IE no la tiene en cuenta cosa que no es cierta en el 100% de los casos.
De todas maneras, en la práctica, tal como están escritas, sól oson comentarios ya que están entre /* y */ así que no se ejecutan en absoluto y por lo tanto , pueden borrarse.
Más aún la segunda aya que no existe ningún elemento cuyo ID sea page
Tenía la vaga idea que era algo para que cierto blog se ejecutase correctamente en Internet Explorer, como si cada navegador tuviera su propio intérprete. Muchísimas gracias por iluminarme y la recomendación! :)
Yo sigo teniendo problemas, es que ando modificando una plantilla, el problema es que tengo un espacio exagerado desde el final del Outer-wrapper, o sea del footer, y el final del blog, no se si me hice entender así que te dejo el link del blog, necesito una ayudita http://laenciclopediaseiyuu.blogspot.com
Revisa las entradas publicadas, puede ser que el error esté en una de ellas porque las páginas individuales se ven correctamente sin ese espacio de sobra.
Hola JMiur... gracias por este tutorial, espero que hayas pasado un buen fin de año :)
justamente ahora se me vino ese problema que se me desajustaron todos los gadgets y no veo donde arreglarlo... he estado modificando una plantilla y se me desordenó todito! :(
aqui te dejo una imagen para que veas el desastre :X http://k27.kn3.net/8719A1DF6.png
este es el blog de pruebas http://pruebplan.blogspot.com/
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...