Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Cambiar la cabecera por una imagen (Plantillas Minima) -44-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las plantillas Minima (Dark, Blue, Ochre, Lefty).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto, te puede servir simplemente para guiarte.

En la cabecera de las plantillas Minima tienen un borde, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Aquí tenemos que cambiar el valor del border de header-wrapper y header. Entonces el nuevo valor para los dos será: border:0 (sin px).

2. Luego buscas el div con el id header-wrapper.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

3. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>

</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
  • Header1
Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 660 px y un alto de 110 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:
<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />
Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

31 Comentarios:

May dijo...

Gracias Andrew...cuando lo haga te invito a que lo veas!...y te debo la imagen de regalo!

"JxE" dijo...

hola andrés!!! muy bueno tu blog. solo queria preguntarte si puedes decirme donde has conseguido y como has puesto ese cartel con letras rojas que se mueven en la pagina inicial a la derecha. gracias.

Andrés dijo...

Hi.
May: Sigo esperando mi imagen jejeje.

Jxe: Sobre el cartel tienes que ir a Etiquetas, Letreros e Imágenes y ahi busca Letrero Luminoso para el blog.
Bye.
Gracias a los dos por la visita.

Loky dijo...

Muchas gracias Andrés he seguido tus instrucciones y me ha funcionado de maravilla. El resultado en http://loky.tk

Olvido dijo...

Despues de marearme por todos lados, he encontrado tu página Andres y aunque sé que no es este el post, querría pedirte el favor, si puede ser, que me dijeras cómo puedo meter el código (que ya tengo) para contador de visitas en mi blog. Aunque te parezca mentira no tengo ni idea de donde meterlo cuando me salen todas esas letras 'chinas' en la edicion html de la página. Soy incapaz.
Quisiera colocarlo al final de la página y ya que estamos jeje quitar una cosa que sale al final de la página que pone: "Suscribirse a: Entradas (Atom)", ni siquiera sé si es posible hacerlo.
Te quedaría muy agradecida. Si crees que esta entrada no debe estar aquí, borrala silo deseas.
Muchas gracias. Un saludo

Soleska dijo...

Hola Andres!!! el código funciona muy bien pero cuando le cambio el tamaño se arruina la resolución de la imágen y la verdad que no se como solucionarlo. Agradezco respuesta como siempre un gusto pasar por tu blog!!!

Andrés dijo...

Hi.
Locky: Que bueno que te haya funcionado.

Olvido: Para poner un contador en tu blog, simplemente es: insertar elementos... clic en html, pegas el codigo, lo guardas y lo arrastras al final.

Soleska: En esta plantilla especifico el ancho y alto, el cual tienes que jugar para que quede exacto, el detalle es que si le cambias el tamaño de todas maneras se distorciona el ancho o alto. Quizas si tu imagen es grande pocrias reducir. Así que tienes que subir tu imagen exacta, quizas el problema sea el ancho, es cuestion de jugar con los valores.
Me hubiera encantado visitar tu blog para verlo
Bye.
Gracias a los 3 por la visita.

Anónimo dijo...

gracias Andrés, cuando lo tenga mas o menos listo te paso la dirección!, saludos y gracias. Veré como me las arreglo con los headers!

Soleska

Daniel Carrica dijo...

Hola, Andrés.
Yo soy Daniel y la verdad es que tengo tu blog en favoritos. Recién entré en "el escaparate de Rosa" y ví tu comentario sobre las cabeceras. Sabes, en realidad no tengo por costumbre dejar comentarios, pero pienso que debo hacerlo ya que de tí he recibido mucha ayuda y no es justo que no te lo diga. Te agradezco públicamente porque yo también quisiera tener comentarios en mi blog. Soy consciente de que si uno quiere tener un blog exitoso puede tranquilamente poner un blog de ayuda y empezar a cortar y pegar sin saber absolutamente nada del asunto (este no es tu caso) ¿Sabes por qué lo digo? simplemente con solo mirar tu página uno se dá cuenta de que sabes de qué estás hablando, pero me fui del tema, necesito consultarte sobre el tema de la cabecera. Yo tengo la direccion de un par de páginas que te dan gratis más de 500 imágenes de la medida del blog, pero yo quisiera armar una imágen con el título y todo a mi gusto y, la verdad es que me estoy volviendo loco. Puse una, pero, evidentemente no lo tengo tan claro como quisiera, si me puedes ayudar voy a estar eternamente agradecido. Si tienes un minuto, ¿Podrías visitar mi blog? Es un blog cristiano. Si estás en línea ahora sería fantástico, ya que trabajo de noche y generalmente no hay nadie a esta hora. Si quieres te pasaré las direcciones de las páginas de imágenes para cabeceras, ya estan todas a las distintas medidas de los blogs. Mi dirección es : http://tierradelagracia.blogspot.com/ Mi plantilla es la Minima del blog nuevo (no el beta) Por supuesto no está original, ya la he cambiado algo. Te mando un gran saludo desde Buenos Aires.

Andrés dijo...

Hi.
Daniel Carrica: Gracias por la visita y por lo buenos comentarios.
Sé que existen demasiada páginas de ayuda, mas que ayuda parecen que estuvieran compitiendo porque publican a veces unas cosas que ni se les entiende o simplemente publican, como lo mencionas, y no saben nada.
Por ejemplo, recuerdo que un comienzo habia pocas páginas de ayuda pero no me convencian del todo, asi que por eso me anime a crearme un nuevo blog, en la que pueda ayudar a la gente que recien se inica en esto del blog, siempre y cuando pueda.
Digo un nuvo blog, porque tengo otro en la que publico cosas de cine y música.
Por cierto siempre es bueno dejar comentarios o contestar porque los que visitan tu blog aunque no lo creas estan al tanto de tu respuesta o de que lo visites.
Sabes como necesitas mas ayuda, he visitado tu blog, asi que seria bueno que me dés tu correo para agregarte y ayudarte un poco mas.
Bye.

Daniel Carrica dijo...

Hi! Me alegra tu pronta respuesta. He andado por ahí buscando imágenes para mi cabecera y encontré dos páginas que están muy buenas:www.freewebpageheaders.com donde hay más de 500 imágenes de 800 x 200 px y dentro de la misma página "urban dirty" que es más bien para blogs góticos o darks y en la que puedes resizar al tamaño que tú quieras. La verdad es que he puesto una imágen y jorobando con la plantilla cambié el color de la sidebar porque no sé cuál es el código para separar las sidebar de los post (me refiero a una línea vertical que defina dónde termina el main de las sidebar)
porque no me gusta mucho el diseño que le he puesto, me gustaría que me dieras tu opinión. aquí va mi correo: danielcarrica@hotmail.com.ar pero como hotmail anda como el mundo te dejo el de yahoo por las dudas : danielkrrik@yahoo.com.ar Saludos Andres! Con respecto a lo que le dijiste a Rosa, pues yo jodí con el #header y puse url nada más y listo. como no sé añadir texto a la imagen la dejé así. No tuve que borrar nada. Adiós!

Cajeros del chile dijo...

Hola andres...
me funciona bien el truco ese, pero ese codigo sirve para cambiar esa imagen por una ke sea .SWF.
eske necesito colocar una con esa extencion pero no me funca el codigo ese...

me podrias ayudar porfis...

Andrés dijo...

Hi.
Cajeros: Este truco sirve para imagenes con extension .jpg .gif .pnp .bmp
Pero con la extensión que mencionas no se puede porque se necesita otro código.
Gracias por la visita.
Bye.

Maria de los Hitos dijo...

Muchas gracias por tus consejos, he conseguido cambiar la cabecera de mi blog por un letrerito que he escrito y escaneado. También he ocultado la barra de blogger... pero me gustaría darle más espacio a los artículos, ensanchar el espacio y achicar el de la sidebar. Seguiré buscando en tu blog a ver si encuentro la respuesta ya que me resulta muy fácil trabajar con tus consejos.
Un saludo

Maria de los Hitos dijo...

... el blog que he tuneado con tu ayuda es "Siempre llego tarde" por si quieres echarle un vistazo...
Más saludos

robersnake dijo...

Oye Andres yo tengo la minima black de 3 columnas y quiero cambiar la imagen de la cabecera pense que con este tutorial tuyo lo podria hacer pero no, me dice que no se puede guardar por que esta mal formulado que puedo hacer no se si sea otro el tutorial que deba seguir.

Mira este es mi blog para que sepas cual es si no me supe explicar bien:
http://elblokeelemental.blogspot.com

Saludos tienes un excelente blog de ayuda.

Andrés dijo...

Robersnake: Decirte que esto sirve si lo usas manualmente, pero ya en Blogger se puede añadir una imagen sin necesidad de hacerlo uno mismo.
En mi blog publique acerca de eso, tendriás qaue buscar en Preguntas Frecuentes ¿Cómo cambiar la cabecera por una imagen?.
Gracias por la visita.

Doppelgänger dijo...

Hola: Antes que nada qujiero agradecer por los tips que aportan a nosotros. Gracias!

Quiero poner una imagen de cabecera, pero que ocupe de lado a lado el blog...lamentablemente me queda centrada y se expande hacia la izquierda.

¿Cómo puedo corregirlo?
Gracias nuevamente y SALUDOS A QUIENES TRABAJAN EN ESTE BLOG

Andrés dijo...

Doppelgänger: Tu imagen debe tener aproximadamente un 660 px de ancho y un alto de 110 px, para corrigir tu imagen lo tendrias que hacer emdiante un programa qie puede ser Microsoft Photo Editor algo asi, pero te recuerdo que si tu imagen es demasiuada chica y quieres modificarla se distorcionara, asi que tu imagen tiene que se grande para que puedas hacer las modificaciones correspondientes.
Ahora bien, si tu imagen es chica ponla en Power point y ponlo como una dispòsitiva ahi se ve un poco grande y luego la capturas y de ahi lo pegas en Paint.
Quizas eso te ayude si tu imagen es demasiada chica.
Una vez en Paint lo cortas lo guardas y ya tienes una imagen algo grande.
Espero que me hayas entendido.
Gracias por la visita.

mao dijo...

HOla. Gracias por tu valiosa ayuda. Sin embargo se me presenta un problema, pues al desaparecer el título del blog, el espacio de la cabecera se reduce y no se ve completamente la imagen. Cómo puedo solucionar esto?

Anónimo dijo...

HOLA,me pueden dar una mano.Bueno,coloque en mi blogger en la cabecera una imagen,ok bueno solo que junto a la imagen coloque un reproductor que es de color negro pero hay una parte que es de color azul y quiero saber si da para dejarla de color negro Gracias por leer.Saludos Mi blogger es cristalfm1079.blogspot.com

Ricardo Mena dijo...

Necesito Ayuda urgente.
Uso una plantilla Tic Tac en mi blog y necesito cambiar la imagen de la cabecera completamente.
¿Me podrías explicar como hacerlo?
Si quieres dame tu mail o te doy el mio.
Es urgente por favor.

Gracias.

Gianna dijo...

Hola genio!... Lo primero saludarte y decirte que me encanta tu blog. Paso a la consulta. Tengo una plantilla Mínima y un código de fondo, para darle vidilla al blog. La cuestión es, quisiera separar un poco más las dos columnas. Ya no puedo manejar el tamaño de ellas porque se me salen las letras y queda feo. Solo eso, como hacer para que entre las dos columnas, quede un espacio que no sea este y que me agobie tanto. Gracias por esto. Otra cosa, quería pedirte permiso por si puedo añadirte como enlace en mi blog. Otra vez, gracias. Te dejo mi link, para que me digas si es posible eso de separar las column. Saludos a todos

http://gianna-inca.blogspot.com/

Subliminal Shop. dijo...

buenas amigo, estoy sufirnedo con l aimagen dela cabecera, se colocarla, pero no se alinea com yo deseo, quierop que salga centrada y no haga ese espacio en negro a la izquierda, aqui puede verlo http://subliminalshop.blogspot.com/

si me pudieran ayudar a que kede centrada, ese es el amño que busco, pero que muy a al derecha

Subliminal Shop. dijo...

buenas amigo, estoy sufirnedo con l aimagen dela cabecera, se colocarla, pero no se alinea com yo deseo, quierop que salga centrada y no haga ese espacio en negro a la izquierda, aqui puede verlo http://subliminalshop.blogspot.com/

si me pudieran ayudar a que kede centrada, ese es el amño que busco, pero que muy a al derecha


mi correo lamcast@hotmail.com para cualkier ayuda por favor

apuntes juveniles dijo...

hola como estas me gustaria que me diga si es posible como puedo hacer un banner en mobimiento para la cabecera de mi blog
gracia
http://www.juglarblog.info/ en este blog esta lo que tedigo que quiero hacer miralo por favor y dime como hacerlo ya que le he escrito al dueño del blog y no me contesta

Lacrimas dijo...

Gracias pero a mi no me resulta u.u me sale el siguiente mensaje

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "

espero que me puedan ayudar =)

xdark.blood@gmail.com
jonathan.acroma@hotmail.com

Publio dijo...

graciaaas me ha venido perfectooo

Universitaria de Hoy dijo...

No se si el problema de la imagen de mi blog se solucione asi...

Espero que puedas ver mi blog y decirme como hacer para que la imagen se vea centrada.

Además noto que mi blog es muy ancho porque no se ve bien y hay barras de desplazamiento y el tuyo se ve perfecto!!!

Si alguien sabe, diganme...

Cherman Aquiarms dijo...

Hola lo que quisiera hacer es poner un archivo flash en la cabecera del blog, ¿Sabes como?
Te pondre un link con la pregunta que hice en un foro porque aqui no me deja poner ciertas etiquetas html. espero que me ayudes gracias:)

http://es.answers.yahoo.com/question/index?qid=20110419205554AAcxzzi&r=w

Embiologger dijo...

Muchas Gracias por el aporte ...

Que directorios me recomiendas para mi blog ?? trata de biología

Gracias por permitirme participar

Related Posts with Thumbnails
Últimos Post