La imagen pueden subirla a blogger o en cualquier otro host.
Aqui les dejo la Plantilla Minima Black con los cambios Ya realizados, para que la descarguen: Minima Black Imagen en el Titulo
Todo lo que esta entre " " es una explicacion que deben eliminar, la puse al lado de cada linea que se debe modificar para que quedara mas claro, si no entienden algo, dejen la pregunta en el comentario.
Este el codigo Inicial:
/* -----------------------Header ----------------------------------------------- */
@media all {
<!--EN ESTA PARTE AGREGAREMOS 3 LINEAS UNA CORRESPONDE AL LINK DE LA FOTO, OTRA ES PARA AJUSTAR EL ANCHO Y LA ULTIMA PARA CENTRAR LA IMAGEN-->
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333; <!--ESTO CORRESPONDE AL BORDE MAS EXTERNO SI QUIEREN LO ELIMINAN-->
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222; <!--CON NONE ELIMINAMOS EL BORDE-->
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222; <!--CON NONE ELIMINAMOS EL BORDE-->
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
@media all {
<!--EN ESTA PARTE AGREGAREMOS 3 LINEAS UNA CORRESPONDE AL LINK DE LA FOTO, OTRA ES PARA AJUSTAR EL ANCHO Y LA ULTIMA PARA CENTRAR LA IMAGEN-->
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333; <!--ESTO CORRESPONDE AL BORDE MAS EXTERNO SI QUIEREN LO ELIMINAN-->
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222; <!--CON NONE ELIMINAMOS EL BORDE-->
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222; <!--CON NONE ELIMINAMOS EL BORDE-->
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
Este el codigo Final:
/* -----------------------Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:none; <!-- ASI ELIMINAN EL BORDE -->
background: #000 url( http://photos1.blogger.com/blogger/7875/3285/1600/Encabezado%20Pagina%201.jpg) no-repeat; <!--ESTA ES LA URL DE LA IMAGEN #000 CORRESPONDE AL COLOR DE FONDO LO PUEDE CAMBIAR, REVISEN POST ANTERIORES-->
padding: 0 0 187px 0; <!--CON ESTE PADDING PUEDEN AJUSTAR EL ANCHO SI SU FOTO ES MAS ANCHO CAMBIAN EL 187, POR UN VALOR MAYOR Y VICEVERSA-->
background-position: center; <!--ESTA ES PARA CENTRAR LA IMAGEN-->
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:none; <!--ELIMINAMOS EL OTRO BORDE -->
font-size:200%;
line-height:1.2em ;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:none; <!--ELIMINAMOS OTRO BORDE EL DE LA DESCRIPCION-->
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:none; <!-- ASI ELIMINAN EL BORDE -->
background: #000 url( http://photos1.blogger.com/blogger/7875/3285/1600/Encabezado%20Pagina%201.jpg) no-repeat; <!--ESTA ES LA URL DE LA IMAGEN #000 CORRESPONDE AL COLOR DE FONDO LO PUEDE CAMBIAR, REVISEN POST ANTERIORES-->
padding: 0 0 187px 0; <!--CON ESTE PADDING PUEDEN AJUSTAR EL ANCHO SI SU FOTO ES MAS ANCHO CAMBIAN EL 187, POR UN VALOR MAYOR Y VICEVERSA-->
background-position: center; <!--ESTA ES PARA CENTRAR LA IMAGEN-->
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:none; <!--ELIMINAMOS EL OTRO BORDE -->
font-size:200%;
line-height:1.2em ;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:none; <!--ELIMINAMOS OTRO BORDE EL DE LA DESCRIPCION-->
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
(No Ratings Yet)
Loading ...
nooo puedoooooooo que impotenciaaaaa subi la foto en una entrada HTML y me sale como tres lineas de info y trato y trato y no me saleeeeee
puse arte abstracto en google y me salio una foto re copada esa quiero y no hay caso juaz…me dan ganas de romper la maquinita..
hola patricia , perdona que este comentario no se relacione con el posts , queria preguntarte que he cambiado a blogger beta , en el otro tenia tus codigos, de ultimos comentarios y me funcionaba muy bien y en este no funciona , podrias decirme por favor a que puede ser debido , gracias por toda tu ayuda
saludos
Es una lastima que no sean mas especificos
mas especifico???…tienes hasta la plantilla minima black para descargar con los cambios ya realizados…que mas quieres por dios???
Creo que ni siquiera leiste el post, dentro del codigo que debes mirar, el antes y despues, esta el detalle de los cambios realizados en cada linea….
suerte!!
Hola patricia… que desperdicio, despues de matarme a para cambiar mi página te descubro…
Todo esta “bien” pero mi problema es que me gustaría desplazar el encabezado hacía el principio de la pantalla, ya que ahora queda a unos 2 centrimetros de la barra de direcciones.
Muchas gracias
Infinitas gracias, amiga patricia, me fue de mucha ayuda tus explicaciones y ya pude subir una imagen a el titulo de mi blog…. gracias…
Oye muchas muchas gracias, ahora mi pagina tiene una imagen como titulo.. yo no se como no pueden hacerlo los demas… si esta bien explicado… solo pongan ganas… y les va a salir…
aya, y si la imagen que quieren poner lo tienen guardado en su pc y no tienen la url (tienen que tener la pagina para poder poner la imagen como titulo) entren a: http://imageshack.us/ … abren su archivo y ponen “host it”… el codigo que tienen que copiar es el ultimo (Direct link to image) y ya tienen la pagina de su imagen… (con esto uds pueden crear el diseño que quieran y ponerlo como titulo en su blog)..
y si la imagen salio muy chica, solo tienen que elegir el tamaño que quieren en: “resize image” antes de poner “hos it”… espero les sirva. bye
Hola Paty, estuve buscando un poco en tu página y veo que eres toda una exoerta en esto, sigo buscando pero no encuentro comoponer una imagen de fondo, espero me puedas ayudar, gracias…
Eso me pasa por no dar en vista previa, quise decir “EXPERTA”
A mi me sale una leyenda que dice “cerciórese que sus codigos XML esten cerrados apropiadamente” asi que de imagen ¡nada!