JMiur [E]

Hay muchas formas de personalizar el HEADER (cabecera) de Blogger Beta, tanto con textos como con imágenes. Lo más importante, es la imaginación, las técnicas son muy simples.

Para empezar debemos comprender qué el HEADER, como cualquier elemento de la plantilla, está formado por bloques DIV, áreas rectangulares definidas en las declaraciones de estilo que poseen ciertas propiedades (ancho, alto, márgenes, color de fondo) y que están uno dentro del otro, separados por una cierta distancia (padding):

el DIV externo:
300 x 90 : padding 20 pixeles
el DIV interno
260 x 50 : padding 20 pixeles
En el caso del Header, al DIV externo se lo identifica (atributo ID) como #header-wrapper y al interno #header. Dentro de este último se insertan el texto del título (generalmente dentro de un tag H1) y el texto de la descripción.

El #header-wrapper tiene, por defecto un ancho definido (width:...px) y, dependiendo de la plantilla, un borde (border:...), un color de fondo (background: #...) o una imagen (background: url(...)). Cualquiera de estos datos puede ser personalizado.

Si lo que queremos es agregar o cambiar la imagen existente, podemos utilizar una imagen completa que abarque todo su ancho lo que significa que deberíamos saber cuál es el tamaño necesario (ancho y alto en pixeles) y luego, agregar o modificar la declaración correspondiente:
#header-wrapper {
.......
background: url(URL_imagen) no-repeat;
.......}
También podemos utilizar un imagen en mosaico (tile), repitiéndola en sentido horizontal, vertical o en ambos sentidos:

repeat-xrepeat-yrepeat



background: url(URL_imagen) repeat-x;
background: url(URL_imagen) repeat-y;
background: url(URL_imagen) repeat;
Mediante rutinas JavaScript es posible cambiar, aspectos de la página, modificando el estilo de los elementos. Si queremos utilizar diferentes imágenes que cambien aleatoriamente, deberemos modificar la propiedad background. Para esto, antes que nada, deberíamos tener subidas las imágenes a ser utilizadas y luego, agregar el siguiente codigo justo antes del tag </head>:

<script type="text/javascript">

var imagen=new Array();

// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
// ....... todas las que se quieran
imagen[7]="URL_imagen7";
// numeradas a partir del cero y en forma consecutiva

var alea=Math.round(Math.random()*CANTIDAD);


// donde CANTIDAD = último número de orden (en este caso, 7)

document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>

NOTA: si usamos imágenes es mosaico, debemos cambiar no-repeat por repeat-x si se quiere repetir horizontalmente, repeat-y si se quiere repetir verticalmente, o repeat si se quiere reptir en ambas direcciones.

Esta variante de la rutina anterior, cambiará la imagen dependiendo de la hora en que se abre la página web:

<script type="text/javascript">
var imagen=new Array();

// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
imagen[3]="URL_imagen3";
imagen[4]="URL_imagen4";
imagen[5]="URL_imagen5";
// la cantidad depende de como dividamos las 24 horas

var now = new Date();
var hours = now.getHours();
var alea=0

// ... en este caso, hay 6 divisiones
if (hours>0) {alea=0;} // de 0 a 4
if (hours>4) {alea=1;} // de 4 a 8
if (hours>8) {alea=2;} // de 8 a 12
if (hours>12) {alea=3;} // de 12 a 16
if (hours>16) {alea=4;} // de 16 a 20
if (hours>20) {alea=5;} // de 20 a 24

document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>

POST-EDICION: si alguien quiere ver un buen ejemplo en acción, Migoz de Los orientales, tiene una página donde implementó el script (fuera de Blogger) y se tomó el trabajo de dividir el día en 24 horas.

97 comentarios:

rasa  

Amigo ya que estamos en esto del Header te hago una preguntilla: ¿como se hace para que al clickear en el header nos remita a la página de Inicio? Muchas Gracias!

Responder
JMiur  

En las plantillas nuevas, eso sólo pasa cuando NO estamos en el inicio. Es la forma de poder volver a la página principal rápidamente.

En la que usás ahora, eso pasa porque tenés dos headers, en el de arriba aparece NITROX (un texto) y en el de abajo una imagen, el logo de tu blog. Aquí, depende mucho de lo que quieras tener.

Te voy a mandar un email para darte un par de alternativas. No te preocupes, no es tan difícil. Relájate y goza.

PD: ¿el logo tiene un gorro navideño?

Responder
rasa  

jajaja si es para estar en clima, pocos lo notan a Fede practicamente tuve que tomarle la cabeza y hacerle tragar el monitor para que la vea, Juan cayó solito igual que vos jaja, es una pavada que me gustó jejeje.

Gracias por vuestra amabilidad sir!

Responder
JMiur  

Está bueno y es muy sutil. ¿Habrá algún post al tono? ¿Nuevos modelos de trineos, tal vez? :-O

Va nuevo email con nueva respuesta.

Responder
rasa  

jajaja tendré que investigar por la web! Sería muy original! Robaré descaradamente tu idea amigo!!! Por favor, sinceras disculpas del caso. ;)

Responder
JMiur  

Disculpado. En la factura, ¿querés que te discrimine el IVA? :-)

PD: si en tus estadísticas ves a un loco que iba de uno a otro lado era yo que probaba tu blog. PERFECTO. PERFECTO. PERFECTO

Responder
rasa  

jajaja Factura C por favor, Gracias x sus servicios!!!
(shh, en negro no me lo podes vender?)

Responder
JMiur  

¿Y después no sabés por qué la encuesta de los piratas te da mal? Bueno, está bien. Por esta vez, pasa.

Responder
melanista  

Una pregunta, en blogger beta el nombre del blog me sale justo enmedio de la imagen de cabecera y me gustaría que apareciese alineado por ejemplo a la derecha. ¿Qué codigo tengo que poner?

Responder
JMiur  

En el header de la plantilla hay una serie de definiciones de estilo:

#header-wrapper, #header

en una de ellas o en varias, debe aparecer la propiedad:

text-align: center;

hay que cambiar center por right

Responder
Anónimo  

Gracias, justo cuando Fede lo necesitaba lo hiciste. De paso lo tendré en cuenta para implementar alguna variación en algún momento. Un abrazo

Responder
JMiur  

Cuando necesites ayuda, avisame.

Responder
Fede  

Bueno, apliqué el truco de las horas... jejejeje

Que capo sos, JMiur!

Responder
JMiur  

¿En serio? Ahora voy a verlo.

Responder
JMiur  

Perfecto, me tocó el verde (¿el de Rasa?) a las 17:20. Iré después de las 18 a ver otro.

Responder
Anónimo  

Hola Amigo Jmiur,

Espero no causarte molestias con tantas preguntas. He puesto en practica la mayoria de las cosas que he encontrado en este maravilloso BLOG, pero con esta no se que esta pasando. Quiero poner una imagen JPG como header pero he tratado de varias formas y aun no puedo hacerlo, pense que Google tendria algo mas funcional para cambiar el header pero veo que no tiene nada, es mas ni siquiera para modificarlo. me puedes ayudar nuevamente? gracias por tu disposicion!!
OxygenO

Responder
JMiur  

En principio, desde el mismo Blogger, Diseño, en la primer solapa, haciendo click en Editar sobre el elemento Header, deberías tener la opción de colocar un texto o una imagen.

Puede ser que esta opción no esté disponible.

Déjame la dirección URL de tu blog para verlo. En este momento, hay muchas plantillas que utilizan diferentes códigos para mostrarlo.

Responder
Anónimo  

Gracias por tu pronta respuesta,

el url es eduardotejera.com

Saludos,

Responder
JMiur  

Perfecto, parece ser una plantilla normal.

Primero, fijate aquí porque me parece que el código es casi igual al que tiene tu plantilla.

Si tienes algún problema, lo mejor es que me contactes por mail:
vagabundia@gmail.com
porque escribir códigos tan extensos en los comentarios es problemático. Una posibilidad es que tu plantilla muestre algo muy distinto (cosa que no puedo ver online). En ese caso, adjúntame el contenido que debería empezar con:
<div id='header-wrapper'>

Responder
Anónimo  

Ok Jmiur ya le mande el email con la plantilla...

gracias mil

Responder
JMiur  

Bien, he recibido el código y te he respondido por mail aun que la dirección que aparece como respuesta me parece algo extraña :)

Si no lo recibes, me avisas. Mi primera sugerencia es ver si es posible hacerlo usando las mismas herramientas de Blogger así que simplemente te indico paso a paso como hacerlo. Si eso no funciona, no te preocupes, deberemos cambiar el código a mano pero no es algo demasiado complicado de hacer.

Responder
Anónimo  

Si ya lo recibi, gracias :) te cuento desde que lo haga cual fue el resultado... ya lo habia notado que el codigo tenia esa capacidad pero habia intentado sin resultado positivo alguno.... gracias Amigo ya te dejare saber el resultado de lo que me mandaste...

Saludos,

Responder
JMiur  

Salvo que la imagen sea algo muy especial, no creo que tengas problemas.

Responder
Manolorv  

Hola. Llevo mucho tiempo queriendo poner una imagen mía en el encabezado de mi plantilla Blogger. Teniendo esta imagen unas proporciones parecidas al mismo encabezado de "vagabúndia" e insetándola en el bloque de cabecera (elementos de página), solo consigo ocupar el 50% izquierdo de toda la cabecera usando la plantilla Thisaway Green (3 Columnas) o usando Rounder 4 (2 columnas). Tengo otras fotos que en Picasa recorto aparentemente igual, pero con las que la imagen se me desborda mucho por la derecha de la cabecera.

¿Es solo un problema de como estoy creando mi fotografia de cabecera, o debo manipular la plantilla en alguna parte?. Si fuese solo un problema del formatos de mis fotos, ¿cual es la herramienta más fácil con la que pueda ver cláramente y elegir las dimensiones de mis fotos para cabeceras?. Todo lo que creo con Picasa o no llega o se pasa.

Gracias.

Responder
JMiur  

Tendría que verlo online pero, da la impresión que la URL de la imagen que estás usando es la que corresponde a una miniatura y no es la URL de la imagen de tamaño natural.

Responder
Manolorv  

Hola. tras muchos intentos, finalmente he conseguido en la plantilla Thisaway (3 Columnas) obtenida en www.Blogcrowds.com colocar de forma 99% aceptable, 2 imágenes, indistíntamente, creadas en imageshack. Las imágenes son http://img112.imageshack.us/img112/4959/dsc0064001cf1cr2.jpg de 890 X 183 159Kb o también http://img205.imageshack.us/my.php?image=jmrv101fg0.jpg de 891 X 198 47Kb (lo que informo para cultura general de los lectores). Ambas imágenes las coloco sin problemas insetándolas en el bloque de cabecera (elementos de página).

Todo esto es no obstante muy extraño y desconcertante para mí, ya que si elijo la plantilla Rounder 4 de 3 columnas tambien de www.Blogcrowds.com, al insertar las imágenes y darle a "vista previa", estas no aparecen por ninguna parte. Además y como ya dije en mi primer mensaje, si tomo la Rounder 3 de 2 columnas, las 2 imágenes citadas aparecen, pero se desbordan un 10% 0 15% por la derecha. Blogger sigue siendo un misterio para mí.
Aprovecho para felicitaros por vuestro trabajo a vagabúndia, Cábalas virtuales, Blog de César y otros tantos que estáis haciendo una gran labor, para que los de aquí abajo naveguemos un poco mejor y no nos ahoguemos en este mundo apasionante de los Blogs.

Responder
JMiur  

La primer imagen n tiene problemas, la segunda si.

La URL es errónea:
http://img205.imageshack.us/my.php?image=jmrv101fg0.jpg
no es la imagen sino una página de ImageShack, la URL real de la imagen es:
http://img205.imageshack.us/img205/6468/jmrv101fg0.jpg

Por otro lado, no parece tener 891x198 sino 891x128. No sé si eso explica lo que te ocurre o no ya que es difícil saberlo sin ver el blog.

Una vez que estamos seguros que la imagen es accesible y de su tamaño real, lo del desbordamiento o "escasez" en uno u otro sentido dependerá mucho del contenedor y de como coloquemos la imagen.

Por ejemplo, si la colocamos como fondo utilizano CSS, y el header tiene una propiedad width de 800px y la imagen es de 900px, esos 100 se cortarán. Si la colocamos utilizando la etiqueta IMG, el contenedor se ensanchará y por lo tanto, el blog se verá mal.

Como ves, hay muchas posibilidades diferentes y la única manera de dar una respuesta es verlo online.

Responder
Manolorv  

Es cierto lo que dices, aunque ha sido un simple error de escritura. En definitiva, mis errores con esas imágenes son los descritos, aunque con los resultados obtenidos hasta ahora, los daré por buenos. Trataré de seguir aprendiendo y prestaré atención a esos otros aspectos que me indicas del contenedor.
Muchas gracias.

Responder
Limoncito  

Buenas! estoy un poco perdida por lo que me gustaria saber si hay alguna web o programa con el que diseñar la imagen facilmente...
^^

Responder
JMiur  

Estos tres son sitios online que pueden ayudar a crear un logo:

text2logo
Freewebpageheaders
SpiffyText

Responder
Limoncito  

ay! pues muchas gracias, a ver si saco un ratillo libre y me la hago :)

Responder
Anónimo  

Es increible este blog. De verdad te felicito. Ya he sacado tantas sugerencias, y todo de un solo lugar. Acá viene el pedido... Se puede poner en el encabezado, una animación swf? otra cosa que se me ocurrió, es borrar el encabezado y poner la animación en una entrada. Pero si hago esto, a medida que genere entradas, voy a empujar la animación que quiero que siempre esté encabezando el blog, verdad?

Desde ya, te agradezco muchísimo.

Responder
JMiur  

Sí, se puede hacer y habría dos posibilidades:

Cambiar el código actual y reemplazarlo por uno nuevo. Para eso, hay que eliminar todo lo que está entre:
<b:section class='header' id='header'>
y
</b:section>
y allí, poner es SWF

También, en lugar de borrarlo, podría ocultarse el header agregando esta propiedad:
#header-wrapper {
.............
display:none;
}

Y luego después de <body>, agregar el SWF.

Responder
Negrolosz  

Hola jmiur, no entendi el tema de los horarios y otra cosa Photobucket sirve para alojar dichas imagenes?
gracias

Responder
JMiur  

Lo de las imágenes es sencillo de contestar: SÍ, Photobucket sirve. Cualquier servidor sirve.

Lo de los horarios, supongo que te refieres a los posts programados.

Hasta ahora, si publicabas un post, no importaba la fecha. Aunque le pusieras fecha de mañana, al publicarlo, se mostraba en el blog inmediatamente.

Ahora, la fecha determina el momento de la publicación. Si haces un post, le pones fecha de mañana y lo publicas, no lo verás en el blog. Recién será visible en esa fecha y en esa hora; Blogger lo mantiene pendiente hasta ese momento.

Responder
hefer  

amigo necesito ajuda... sou novo com blog ayuda-me
ouuuu yo sou hablo portugues

Responder
JMiur  

hefer:
Dime de que se trata y veremos si nos entendemos :D

Responder
Peruvian  

Muy bueno tu blog, la verdad estaba buscando trucos como estos para la personalizacion de mi blog y tu material es muy entendible ademas de que tu redaccion es bastante clara.

Gracias:)

Responder
JMiur  

Saludos, Peruvian. Gracias por el comentario .)

Responder
Usuario10  

Hola JMiur, estoy creando un blog para cambiarle toda la ropa a mi blog desde cero, lo estoy haciendo en un blog de pruebas. Emplee este codigo y si me funciona a la perfeccion, el problema que se me presenta es que aparece el nombre del blog encima de la imagen.

Mira como se ve Blog de pruebas

Como siempre JMiur gracias anticipadas.

Responder
JMiur  

Si puedes ver el código del header expandido, podrías eleimianr todas las etiquetas que muestran el título: <h1> .... </h1>

Tambien podrías ocultarlo con CSS en estas dos definiciones:

#header h1 {
color: transparent;
.........
}
#header a {
color: transparent;
.........
}

Responder
Usuario10  

Gracias JMiur, quedo a la primera :D

Responder
JMiur  

¡Qué rapidez! :D

Responder
jose tula  

Hola jmiur una pregunta se puede hacer que una imagen funcione como inicio, esto es, al abrir por primera vez la pagina abra siempre la misma imagen.
desde ya gracias

Responder
JMiur  

José:
Asé, en general, te diría que si puede hacerse pero, la forma de hacerlo dependerá de la plantilla que uses, etc.

El header puede tener imágenes aleatorias y también podría ponerse alguna condición para que tenga una imagen distinta en el home que en el resto. Habría que ver el caso en particular y lo mejor para eso, sería eliminar todo el código que usa Blogger como elemento Header y usar un elemento HTML o ponerlo directamente en la plantilla.

Responder
jose tula  

Gracias por tu respueta.
la plantilla la modifique te paso el link por si podes echarle un visataso. http://epw.josetula.com.ar/
gracias amigo

Responder
JMiur  

Me da la impresión que, como la imagen está en el CSS, podría ponerse algo así después de </b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#header {
background:transparent url(xxxxxxx) no-repeat scroll left top;
}
</style>
</b:if>

Esa imagen solo se verá en la pagina principal.

Con otras condiciones sería lo mismo:

Esta solo se ve en las paginas de entradas
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#header {
background:transparent url(xxxxxxx) no-repeat scroll left top;
}
</style>
</b:if>

Esta en las páginas de archivos
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style>
#header {
background:transparent url(xxxxxxx) no-repeat scroll left top;
}
</style>
</b:if>

Y al revés, en lugar de == se pone != para lo contrario.

Responder
jose tula  

gracias genio lo voy a probar y despues te cuento.
tengo varios blog y leyendo tus entradas he aprendidido muchisimo
se agradece desde cordoba jose

Responder
JMiur  

Esperemos que funcione :)

Responder
Leo Cesarini  

Hola Capo!!
te cuento: pude colocar una imagen en la cabecera, pero no linkea más al inicio, como hacia la cabecera común.
Debo haber borrado algo de más, o no sé.

Se Puede arreglar de alguna forma simple?? no soy experto en esto.
gracias Maestro!

Responder
JMiur  

Veamos si esto funciona. Busca esta parte y cambia o agrega las propiedades en negrita:

#header {
color:#FFFFFF;
display:block;height:170px;margin:0;
padding:25px 0;width:909px;}

Con los cambios que has hecho, el enlace, ha quedado oculto. Está allí pero no se ve.

Responder
Leo Cesarini  

Que maestrooo!! Funcionóoo!
Muchas Gracias!!
Abrazo.

Responder
JMiur  

Me alegro mucho :D

Responder
AXELdesigner  

O master esta si que no me la sabia ya que en aquellos tiempos no tenia conocimiento de su gran blog.

Saludos.

Responder
JMiur  

Jajajajaja. Sí es una entrada un poco antigüa pero, sigue válida :D

Responder
Teixugo  

Hola JMiur,

Estoy intentando subir una imagen a la cabecera a la izquierda, y que el título quede a la derecha. He seguido las instrucciones que das en esta misma entrada (text-align:rihgt) pero no funciona.
¿Me puedes dar alguna solución?
Gracias anticipadas

Responder
JMiur  

Si se trata de esta imagen: Oveja+cabecera.JPG, lo de text-align no te servirá, esa es una respuesta a un caso específico.

En tu blog, esa imagen está colocada como fondo del header y no admite ser reubicada. Cuando se trata de personalizar esa aprte de Blogger, no conviene subir la imagen en el elemento Header sino hacerlo de modo manual y luego usar CSS.

Responder
Teixugo  

Gracias por la explicación. Soy un poco novata en esto y no me atrevo a hacerlo manual como indicas.
Rosa del Escaparate me ha dado un "parche" para arreglarlo de momento, pero prometo probar tus indicaciones cuando haya practicado algo mas.
Gracias de nuevo por tus tutoriales que leo con interés por ir aprendiendo.

Responder
Turko  

Que tal JMiur, antes que nada seguir deseando un mejor año.. y esas fiestas que no terminan. jaja

Tenía una duda-idea.. intenté algunas cosas pero no me salió. Existe la posibilidad de asignar un enlace a cada una de las imágenes aleatorias?

imagen1:link a pagina1
imagen2:link a pagina2

Algo así?

Saludos!

Responder
JMiur  

Si, es posible pero luego deberías ver como usarlas, es decir dónde colocar esos enlaces.

Responder
Turko  

Pues las imágenes serian los enlaces. Que salga por ejemplo una imagen de una flor.. y al dar clic ir a la etiqueta Primavera.. cuando salga un tempano de hielo. dar clic e ir a la etiqueta Invierno.. y así...

Responder
JMiur  

En ese caso, debería crearse otro script que también modifique el HTML de la página y no solamente el CSS. Es una técnica similar pero el script es completamente diferente.

Responder
馬丁  

Hola JMiur :D quería comentarle que tengo un problemita con mi plantilla porque le hice una serie de modificaciones y no se me ve la cabecera en el internet explorer, sin embargo en Mozilla Firefox, Google Chrome, Opera y Safari se me ve perfecta ¿cuál podría ser el motivo por el cual no se me visualiza la cabecera en el explorer?

Responder
JMiur  

¿En cuál de tus blogs ocurre eso?

Responder
馬丁  

Hola JMiur el blog es empirismo-asiatico.blogspot.com

Responder
JMiur  

Pués lo he mirado y no entiendo. Esto es lo que veo:
en Internet Explorer
en Firefox
en Chrome
¿Cuál es la imagen del encabezado y en que aprte del código está?

Responder
馬丁  

Que raro a mi se me ven en todos los buscadores excepto el "IE" le muestro a continuación:

Internet Explorer: http://img808.imageshack.us/img808/7614/17937181.png

Mozilla Firefox: http://img840.imageshack.us/img840/3979/mozilla.png

Google Chorme: http://img805.imageshack.us/img805/4334/googlechrome.png

Opera: http://img820.imageshack.us/img820/3658/operaf.png

Safari: http://img843.imageshack.us/img843/702/safari.png

Al decir verdad es raro, porque a usted le aparece de otra manera, pero tengo la certeza de que debe ser algún error de la configuración de la plantilla probablemente. Si le parece mejor acá le dejo en encabezado que utilizo:
http://img189.imageshack.us/img189/1493/78735936.png

La parte del Código es: /* ---( page defaults )--- */

Si le resulta más cómodo acá le dejo mi plantilla para que pueda verificar mejor el problema: http://www.mediafire.com/?h8hxk5wntmpab7m

Responder
JMiur  

Oh si. Todo eso ayudó mucho y por lo menos me doy una idea de lo que debería ver.

Te comento que una duda ya está despejada y es que el tema de la imagen que no se veía ayer es un problema de ImageShack que a veces funciona pésimo. Sugeriría que pensaras en colocar las imágenes de tu plantilla directamente en Blogger para evitar problemas.

De todas maneras, por fin, lo que veo ahora es lo mismo que muestras en tus capturas. El tema de IE parece ocurrir en versiones inferiores a la 8 o cuando se usa IE8 en modo compatibilidad IE7.

Voy a darte una idea a ver si eso soluciona el tema, sino, buscamos alguna otra más sofisticada.

Si te fijas, en #content-wrapper dice margin-top:247px;

#content-wrapper {
.....
margin-top:247px;
}

elimina eso o cámbialo por margin-top:0;

Luego, busca esta otra definicion de #outer-wrapper y donde ahora dice margin:0 auto y cámbiala por margin:247px auto 0;

#outer-wrapper {
.............
margin:247px auto 0;
}

En IE7 se debería resolver el problema y en el resto de los navegadores no habrá cambios

Responder
馬丁  

SIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII alabado sea JMiur que me acaba de salvar la vida con esta gran mano que me dió.
Un cuatrillonaso de gracias JMiur y perdón por la molestia ocasionada.

Responder
JMiur  

No fue nada :-D

Responder
馬丁  

Hola JMiur después de haberme dado felicidad de poder lograr ver la imagen de la cabecera en todos los navegadores, note un detalle más pero solamente en el Internet Explorer (que cosa parece no querer rendirse jeje :D) y es el siguiente: los relatos de los temas que posteo y la linea que divide un post del otro traspasan los límites de la parte de "Entradas al blog" y apenas cruza la sidebar, del mísmo modo la barra que está justo al costado izquierdo de la parte de "Entradas al blog" no aparece debido a que esta media decentrada también. Pero solamente me ocurre con internet explorer, porque con el resto de los navegadores se me ve bárbaro el blog, ¿qué podría hacer para solucionar este inconveniente?
A continuación le dejo una captura de los errores :p :
http://img832.imageshack.us/img832/7380/errores.png

Responder
JMiur  

Eso es complicado ya que siempre, estamos hablando de versiones de IE inferiores a la versión 8.

A mi me parece que muchos de esos problemas son generados por el uso de los márgenes negativos definidos en #content-wrapper. No veo necesidad de utilzar esos márgenes; yo los lo eliminaría directamente porque así, cualquier otro ajuste, es más sencillo de hacer:

#content-wrapper {
.......
margin:0;
}

Responder
馬丁  

uuuiii no me funcionó se me desvirtuan las imágenes al verlas desde el Mozilla firefox :( .
Bueno de todos modos muchísimas gracias JMiur ;)

Responder
JMiur  

Tener esto:

#content-wrapper {
.......
margin-left:-14px;
margin-right:12px;
}

es exactamente lo mismo que tener esto:

#content-wrapper {
.......
margin-left:-2px;
margin-right:0px;
}

Si mueves -14 para un lado y +12 para el otro, el resultado es -2 para el primer lado. En resulmen sólo hay un margen negativo de -2 que es innecesario ya que las versiones viejas de IE lo interpretan mal. El resultado, sría como lo que se ve en esta captura.

Responder
馬丁  

Por fin pude entender JMiur ahora si quedó más que claro la plantila finalmente quedó pipi cucu :D . Muchísimas gracias por todos los detalles, si no fuese por blogermaster como usted nosé que sería de nosotros los bloggers jajaja.
Ahora que raro que no lo vea participando en los "premios 20 blogs 2010" sería bueno que se anote, de ser así mi voto ya lo tiene asegurado ;) y seguramente el del resto de la blogosfera ya que está permanentemente posteando novedades y además de que tiene un sin fin temas de ayuda para blogs.
Saludos Cordiales!!!

Responder
JMiur  

Me alegra que se resolviera :)

Responder
Kultur Metal  

Excelente! gracias

Responder
Gabriel  

como hicieron en la pagina Los orientales para ponerle una pagina de inicio.

Responder
JMiur  

Utilizando un dominio y probablemente un hosting propio.

Responder
Gabriel  

y como hago eso???

Responder
JMiur  

Comprando un dominio propio, contratando un servicio de hosting que te permita tener tu propio servidor, configurando Blogger para eso, etc.

Responder
J. Marcelo Reynaga  

Hola quisiera saber como editar el Header de mi blog ya que no aparece el titulo que dice:
#header-wrapper

Responder
JMiur  

En tu blog se muestra como #header { ............ }

Responder
Unknown  

Hola amigo sabes como se puede poner una cabecera como la de esta pagina??

http://www.fanatico-online.com.ar

Responder
JMiur  

No es algo que pueda darte detalles; sólo son imágenes y enlaces.

Responder
Unknown  

claro pero como podria hacer para ke al pasar el curso se valla moviendo cada imagen??
me podrias ayudar

Responder
Unknown  

si te fijas bien cuando le pasas el cursos por encima las imagenes se mueven

Responder
JMiur  

No veo que nada se mueva así ique deben estar usando un script que funciona sólo en algún navegador determinado.

Responder
Unknown  

no se corren la imagenes cuando pasas el cursos sobre 1 de ellas?? no creo que tenga algo que ver el navegador a mi me sale con crone y el explore

Responder
JMiur  

Tendrás que buscar cuál es el script que utiliza. Probablemente, alguno de la librería MooTools que es al que tiene integrada al sitio.

Responder
mispadressonprimerizos  

Hola, el tema de las imágenes aleatorias lo sé pero la duda me surge cuando quiero q el header principal (inicio) siempre sea el mismo y cambie aleatoriamente de header al pinchar sobre cada una de las paginas.

Te mando la direccion del blog...http://mispadressonprimerizos.blogspot.com.es/

JMiur  

En ese caso necesitas una función de JavaScript que lo haga; como tienes jQuery; algo así:

jQuery("#header-inner img").live("click", function(e) {
e.preventDefault();
jQuery(this).attr("src","url_imagen")
})

y debes definir la manera de generar ese dato "url_imagen" de modo aleatorio.

Responder
MSFTS  

Hola:)
tengo una duda y no se si es el lugar correcto para preguntar esto pero ojala que me respondas POR FAVOR :D

El caso es que en mi plantilla el codigo para cambiar el Header es:
#wrap4 {
background: url(http://) no-repeat center top;

El problema es que la imagen que quiero poner de Header no es un url, porque le puse maps con Image-Maps.com

y el codigo que me da es:

<div style="text-align:center; width:960px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201212281706466" src="http://www.image-maps.com/uploaded_files/5201212281706466_429233_370673066278314_100000068714755_1539196_1331947279_n.jpg" usemap="#Image-Maps_5201212281706466" border="0" width="960" height="576" alt="" />
<map id="_Image-Maps_5201212281706466" name="Image-Maps_5201212281706466">
<area shape="rect" coords="141,251,257,301" href="http://www.twitter.com/willowsmusic" alt="" title="" />
</map>
</div>


Como le hago para poner ese codigo en lugar del url?

Gracias♥
Por Favor responde♥

JMiur  

No sé cuál es el blog en cuestión pero, deberás colocar el HTML en la plantilla, reemplazando el que ahora se utiliza como header y luego, establecer las reglas de estilo adecuadas o eliminar las que tiene.

Fíjate qué tiene como contenido esa etiqueta cuyo ID es wrap4.

Responder
MSFTS  

Musisisimas Gracias por contestar!♥
Creo que encontre una forma, elimando el widget de Cabecera. (:
Pero aun asi te agradezco mucho por contestar :D

Responder
Unknown  

Hola!
La imagen de mi header no se ve en algunos navegadores, que puedo hacer?
http://mariasosten.blogspot.com.ar/
Estoy buscando pero no encuentro nada. Muchas Gracias!!

JMiur  

¿En qué navegadores no se ve?

De todos mods podrías corregir la etiqueta IMG dice algo asícomo

<img alt='Maria Sosten' height='580px; ' id='Header1_headerimg' src='http://2.bp.blogspot.com/-VI5ZpgT3Rl8/UmdEDf8Lg1I/AAAAAAAABes/CP1r2yL0HTE/s1600/Cabeza.png' style='display: block' width='960px; '/>

allí: height='580px; '
debería ser: height='580'

y: width='960px;
debería ser: width='960'

en ambos casos, sin al unidad y sin los espacios extras.

Otra forma es eliminar ambas cosas y poner tode en style y allí si va la unidad:

style='display: block:width:960px;height:580px;'

Responder

¿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 ...

 
CERRAR