Aporte de Jorge Gomez de Mexico
Hola a todos, esta es mi primera participación en este blog, es acerca de como poner una imagen en el titulo del blog, aunque ya ha habido 2 post anteriores a este refiriéndose a como hacerlo e visto que aun hay muchos a los que no les ha resultado, espero que la información que les dejo les sea de utilidad, trate de modificar en mas mínimo el código original.
1.- lo primero que habrá de hacer es subir la imagen a blog, has como si fueras a subir una imagen cualquiera, agrega una entrada agrega la imagen, solo que deberás de seleccionar la opción Grande, cárgala y checate el código HTML busca la parte donde dice "http://photos........ .Jpg" esta dirección cópiala y pégala en un documento de texto y déjala pendiente, ahora cámbiate a Plantilla, no publiques la entrada, esto era solo para subir la imagen.
2.-una vez que estés en Plantilla vas a buscar:
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
aquí haremos las primeras modificaciones
después de: #header { deberás de escribir Background: url("aquí vas a poner la dirección que tenias reservada en el documento de texto, la que te dio después de subir la imagen a blog").
después de la dirección deberás de poner el código no-repeat left top; para que tu imagen no se repita;
Width: el cual te aparece con 660px, yo lo cambie por 990 por que mi imagen abarca casi todo el ancho de la pagina
Margin: se deja como esta
Border: borras los valores y escribe none
de tal manera que te quede así:
#header {
background: url("http://photos1.blogger.com/blogger/4423/3254/1600/Iacosworldbueno.jpg")
no-repeat left top;
width:990px;
margin:0 auto 10px;
border:none
}
3.- lo siguiente en la plantilla a modificar :
código original:
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
Modificar: Padding:20px 20px 20px 20px; esto es para que nos quede centrada
border:none para eliminar el borde
font-size: 0% para eliminar las letras del titulo de tal manera que quede así:
margin:5px 5px 0;
padding:20px 20px 20px 20px;
border:none
border-width:1px 1px 0;
font-size:0%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
4.- la ultima parte a modificar es:
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
aqui cambiar
Padding: por 0 0 90 (en vez de noventa puede ser más con esto ajustamos el alto de la imagen)
Border: none
font: 0% para que nos quede así
margin:0 5px 5px;
padding:0 0 90px;
border:none
border-width:0 1px 1px;
font:0% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
y eso seria todo lo que debemos de hacer para cambiar el header del blog original por una imagen , solo me resta decirte que la imagen que subas si la quieres del ancho de la pagina (aprox) deberá de medir 992 * 172 píxeles, checa que el ancho de la imagen esta directamente relacionado con el Width de #header para que con tu imagen hagas los ajustes necesarios.
Espero haberles ayudado ,Suerte.
(No Ratings Yet)
Loading ...
Perdonen, pero ¿cómo meten scripts o códigos, o como se llame en un textarea sin que les cambie nada? ¿No se supone que es para poner textos? Yo traté de poner uno con el codigo de unas imágenes para copiar y pegar y ¡me cambiaba todo! ponía que no era una imagen real, etc….
Muy agradecida si me cuentan
desilucionada pero no me sirvio para nada pues todo me salio en blanco has omitido algunos codigos que vienen con las plantillas y eso genera confusion o si dejarlos o sacarlos …hasta pronto
mmm…..voy a comprobar lo que mando jorge, probablemente tenga tiempo el dia viernes…
Asi que esten pendientes…Nos vemos..
alemana, no entiendo lo que quieres decir en este caso uno pone class = code y todo funciona bien….
para Fernando: cabe aclarar que todas las modificaciones se hicieron en el Header, y las partes de codigo que no aparece, o que fueron omitidas es por que como comente al principio trate de modificar en lo mas minimo el codigo original y solo puse las lineas de codigo en las que habia modificaciones, si gustas te doy una copia del header completo, para que lo cheques contra tu plantilla y verifiques que cambios se realizaron, espero tu respuesta , gracias.
Jorge
Para nada desilucionado, me salió perfecto, no omitiste ningún código, gracias.
…salvo que quedó con unos puntitos de texto que se los estoy tratando de sacar.
impecable presentacion… temas de
interes para blogistas que deseen
prolijidad y atraccion para sus blogs…asi como yo lo desearia para el mio…
Felicitaciones, Patty, por un buen trabajo…..keep it up!!!!
HOLA,,SOY NUEVA EN ESTOY, ACABO DE ABRIR MI BLOG HACE UNA SEMANA, Y PUES GRACIAS A USTEDES YA LE PUSE CARITAS , YA PUSE EL CONTADOR DE PERSONAS QUE LO VISITAN, Y TAMBIEN PUDE PONER LOS LINKS,,, SIGUIENDO LAS INSTRUCCIONES Y CON AYUDA DE UNA AMIGA,,,
DE NUEVO MUCHISIMAS GRACIS
de nada…
mirad esta imagen que cree en la cabecera del blog con el photoshop para mi blog del World of Warcraft
este es el blog con la imagen y tal.
http://ancientdragons.blogspot.com/
espero que os guste
Muchisimas gracias, al fin pude cambiar el header de mi blog, y me kedo genial.
Echenle un ojo para ke vean como kedo
http://www.darthkivar.blogspot.com
De nuevo muchas gracias…saludos
que bueno!!
Felicitaciones
Hola, seguí todas los pasos para tener foto en el título pero no se colgó la imagen. Los únicos cambios fueron que el comentario del titulo (de qué trata el blog) se borró y el espacio del título se puso mucho más ancho.
Sospecho que tiene que ver con el procedimiento inicial de cargar la foto. El primer paso era cargar la foto pero no publicarla verdad? eso hice,pero entonces, de dónde jala la foto? sólo con el código de la foto que copio luego? Estará ahi la razón por la cual no se me colgó la imagen en el título? Siento que por ahi algo omití, no sé si me pueden explicar más cómo es eso de que cargo a foto pero no la publico.
Bueno, ojala me puedan ayudar, siento que ya estoy cerca pero todavia soy muy inexperta. Muchas gracias, igual en el camino estoy aprendiendo un monton con ustedes
la foto tienes que subirla por obligacion a alguna parte, ya sea blogger o cualquier otro servicio..
No me quedo claro si hiciste eso o no??
Hola Patricia, yo de nuevo, para constestar tu pregunta. Sí, o sea, puse “añadir imagen” y todo eso en la creacion de entradas, pero no puse publicar porque entendí que eso no debia hacerlo sino pasar de frente a la plantilla y copiar ahi la dirección de la foto, o sea, nunca puse publicar. Hice bien? Bueno, no sé en que parte fallé para que no apareciera la foto en el título.
Muchas gracias, Elizabeth
prueba tomando el link que tienes y escribelo en la barra de direcciones del explorer, si aparece tu foto, entonces esa publicada y el problema es otro..Prueba esto primero
Hola Patty, probé y sí salía la foto en la web cuando puse la dirección. Cuando pongo los cambios en los font y font size a cero (como se indica) se borra el titulo, pero no me aparece la foto, y claro, la idea es que salga la foto de fondo del titulo.
tal vez el problema es mi foto? Esta es la dirección de mi foto: http://photos1.blogger.com/blogger/5589/3367/1600/magdalena.1.jpg
mmm Seguire intentando. Muchas gracias
ah, mi plantilla es la mínima. No mínima black sino la más simple, la minima en blanco; por si esa información es relevante…
esta algo grande, en cuanto ajustaste la parte en donde dice:
Padding: por 0 0 90 ????
la tuya debe ser de por lo menos 300
Hola, creé un blog de prueba para subri una imagen, la cual logré subir (bueno, que da por ajustarla iamgen pues la que puse es pequeña, pero eso se peude corregir) el problema que tengo es que el título no se ha borrado, ahi sigue, solo que las letras han quedado pequeñítas. ¿cuál puede ser el problema?
Por si acaso mi correo es jorgeces@yahoo.com
y mi página de prueba es http://rincondeadan.blogspot.com/
Gracias por su asistencia. Esta página es excelene, me ha ayudado bastante….
Jorge
Para la plantilla son of moto lo que hice fue borrar todo lo que estaba entre los < h1 > y < / h1> del codigo que esta abajo..
La tuya tambien debe tener una etiqueta blog-header o algo parecido…
< div id=" blog-header" >
< h1 >
< ItemPage >< a href="< $BlogURL$ >“>< /ItemPage > < $BlogTitle$ >< ItemPage >< /a >< /ItemPage >
< /h1 >
< p >< $BlogDescription$ >< /p >< /div >
hice todos los cambios habidos y por haber y me sale solo un espacio en blanco pobre la foto en mi explorer y si funciona solo tengo fotos de 240 pixeles esta en la url de mi foto haber si alguien me sugiere algo.
http://static.flickr.com/84/205762518_18fcba5529_m.jpg por si sirve de algo mi plantilla es minima …siento que estoy cerca gracias
espectacular. Funcionó todo. Muchas gracias che.
antes de todo, felicitaciones por tan excelente blog, de verdad es una gran ayuda para los inexpertos como yo en esto de los blogs…. bueno, mi plantilla es una minimal black, y bueno, hice todo lo que aparecia aqui…. me salio todo buenisimo, pero el problema es que me salen unas diminutas manchitas en la parte superior que hace ver el blog sucio…. hay algo que pueda hacer para solucionar esto?
muachas gracias por los tutoriales… son de gran ayuda para un inexperto como yo.
=)
gracias por este consejo en particular.
lo estaba buscando hace tiempo.
les dejo mi blog para que entren y se den cuenta que solo basta un tiempo minimo para dejar un blog de excelente forma
http://www.ikku.blogspot.com
al fin pude sacar esos bordes molestosos del título
nunca había entendido , ajja . GRACIAS 
otra cosa si pueden responder , en mi blog tengo una imàgen de título, y cree unos links horizontales , que me gustaría que quedaran debajo de ésta, pero no quedan asi . podrían ayudarme ?
http://www.alarmala.blogspot.com
blog en constante construccion jajaa.
saludos
Y si no sale la foto en la web al publicar la URL, ha qué puede ser debido??
Muchas graciassss
la imagen tiene que aparecer si o si…si la ves en la url propia…por ejemplo como esta:
http://photos1.blogger.com/img/282/6361/1024/bscap011.jpg
entonces debe verse…sino se ve asi…entonces obviamente no se va a ver en el blog. Ahora si se ve asi, y no aparece en el blog, entonces cometiste algun error al agregarla..
Oye, que muchísimas gracias por tu atención. Por si alguien quiere ver cómo ha quedado, ahí va la dirección:
http://photos1.blogger.com/blogger/7017/2269/1600/cabo%20de%20hornos.jpg
Y la del blog:
http://ferfito.blogspot.com/
Gracias por la ayuda… me ha funcionado de maravilla.
Saludos desde Venezuela…
Gusymans
http://gusymansdarkside.blogspot.com
gusymans@gmail.com
Hola, ojalá me puedas ayudar… tengo la plantilla minima black y quisiera cambiar la linea que separa los post al igual que la linea que separa lis links de la barra lateral.
Gracias
No entiendo nada de esto ,AYUDENME PORFAAVOOR
manuelbf_4007@hotmail.com
http/://violet-shoes.blogspot.com