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 el título del blog por una imagen en la nueva versión de Blogger -26-

Para alojar una imagen puedes usar Imageshack o Photobucket. En cambio, si quieres que sea en blogger debes crear una nueva entrada o post. Desde ahí, subes una imagen al editor y después te vas a Edición de HTML, para copiar la ruta de la imagen.

1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:
<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>

2. Una vez ubicado el código, tendrás que borrar <data:title/> para luego agregar el siguiente código: <img src="http://Aquí-la-dirección-de-tu-imagen" /> y a su vez reemplazar la URL de la imagen que has subido en ImageShack, Photobucket o en Blogger.
Así que lo único que tienes que hacer es sustituir los dos códigos(<data:title/>). Esta modificación hará que la imagen aparezca en el título.
Ejemplo:
<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'>

<img src="http://spiderman3.jpg" />
<b:else/>
<a expr:href='data:blog.homepageUrl'>
<img src="http://spiderman3.jpg" /></a>
</b:if>
</h1>
</div>

Nota:
- Cuando borras los dos códigos (<data:title/>) prácticamente se borra el título del blog.

- En cuanto lo que es ancho y alto tendrías que calcular tu imagen al subirlo en un hosting, para que te quede perfecto. En todo caso si te es muy difícil, puedes hacer lo siguiente:
En <img src="http://Aquí-la-dirección-de-tu-imagen" /> agrégale width y height.
Ejemplo:
<img src="http://spiderman3.jpg" width="100" height="250" />

- Probablemente algunas plantillas no tienen el mismo código que les he puesto, pero tienen algo parecido. Sin embargo, incluyen <data:title/>.

**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: /

52 Comentarios:

My Zøø Statiøn dijo...

Hola Andres!

He seguido los pasos como lo describes, pero me queda una duda:

En que parte de la plantilla debo de agregar el punto numero 2?.

De antemano te agradesco y que buen blog tienes!

Andrés dijo...

Hello.
B€ngg€®: Todo es muy claro, asi que compara el punto numero 1 con el punto número 2. Compara los códigos y te daras cuenta que hubo una modificación.
En todo caso leelo con mas calma para poder entenderlo bien.
Bye.
PD: Gracias nuevamente por la visita.

Juanjo García dijo...

hola, muy bien me resulto todo bién. pero habrá alguna manera de que se pueda apreciar el titulo del blog??????

Iñigo dijo...

Gran trabajo amigo, no sabes cuanto estoy aprendiendo.
Un saludo desde el Pais Vasco

Juanjo García dijo...

hola una vez mas gracias, este es mi blog http://juanjo.xphree.com ; como veras ha resultado de gran ayuda, gracias, pero una ultima pregunta más, habra alguna manera de quitar toda la parte superio y solo q se vea la imagen

Andrés dijo...

Hi Juanjo.
Con respecto a tu pregunta, hay solución para eso, pero hay que tener mucho cuidado con lo que se va hacer.
Ubica lo siguiente:
<hi class='title'> (al comienzo hay un signo y al final tambien, me parece que no sale aqui).
Una vez ubicado borras esa linea (todo) y despues mas abajo borras </h1> eso esta despues a 5 lineas aprox, ten mucho cuidado, antes de guardar haz una vista previa, luego me cuentas que tal salio.
Bye.
PD: Gracias por la visita.

Juanjo García dijo...

Muchas Graciasssssss , pués si resulto, verdaderamente agradecido, visita mi pagina y mira el resultado gracias a tu ayuda, pues ahora ¿me permitirías ponerte en mi blog como un enlace??, espero tu respuesta, Gracias ;)

Juanjo García dijo...

hola yo nuevamente, hmm pues mejor pasame tu correo porq acaba de suceder algo hmm por lo q hice, jeje disculpa la molestia

Juanjo García dijo...

jajaja disculpa, pués si esta bién todo, si no que yo movi algo q no era, perdoname y tenme paciencia, jajaja. Muchas gracias, ah y espero tu respuesta para el enlace ;)

Juan E. Tur dijo...

Hola, he seguido tus instrucciones y queda muy bien, pero me da un problema. Y es que en las noticias extendidas, o en las páginas de cada entrada, no me sale la cabecera/sustituto del título. ¿A qué crees que se debe?

Juan E. Tur dijo...

Una cosa más. Ahora he vuelto a añadir el segundo data:title/ y por lo menos me sale el título. Pero del otro modo no salía la imagen.

Andrés dijo...

Hello.
Juan E. Tur: La imagen que has puesto en el título tienes que ponerla en los dos códigos <data:title/> pero hay un detalle te recomiedndo que el código que has pegado en tu plantilla (imagen) la pongas asi: <img src="http://URL-de-la-imagen.jpg" border="0" alt="Image Hosted by ImageShack.us" />
Que este entre comillas porque cuando lo guardas el mismo blogger se va a encargar después de ponerlo asi: <img src='http://URL-de-la-imagen.jpg' border='0' alt='Image Hosted by ImageShack.us' /> (lo cambia de otra manera).
En la descripción creo que no es necesario, pero por si acaso haces lo mismo que een el título.
Bye.
PD: Lo he probado y si sale, simplemente corrige ese detalle. Gracias por la visita.

Mocosillo dijo...

Tengo la plantilla Thisaway Rose y no me funcionó.

Birlo dijo...

Tengo el mismo problema de Juanjo García pero a mi no me funcinó ¿Porque puede ser y como puedo solucionarlo?

YoMatías dijo...

hola...bien yo probé..tengo la plantilla mínima black de blogger, hago todos los pasos como dices pero luego al poner guardar o vista previa me dalta que " 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: Element type "img" must be followed by either attribute specifications, ">" or "/>". " o si no, me aparece tipo la imagen pero no se puede ver, osea el cuadro pero con una cruz... y no entiendo que tengo que hacer...me podés explicar? n_ñ|

Andrés dijo...

Hello.
Mocosillo: He probado en todas las plantillas y se puede cambiar.
Te recomiendo que el código que has pegado en tu plantilla (imagen) la pongas asi: <img src="http://URL-de-la-imagen.jpg" /> Que este entre comillas porque cuando lo guardas el mismo blogger se va a encargar después de ponerlo asi: <img src='http://URL-de-la-imagen.jpg' />.

Brio: Si sale, has lo mismo que le digo a Hermosillo.

Yomatías: Haz lo mismo que le digo a Hermosillo. y si sale un cuadro es porque la imagen no esata bien alojada.

Bye.
PD: Sino guiense de lo que le contesto a Juan E. Tur.
Gracias a los 3 por la visita.

Juany Dj dijo...

HOLA GRACIAS POR LA AYUDA, FUNCIONÓ DE MARAVILLA, EL PROBLEMA AHORA ES QUE CUANDO VOY A LAS ENTRADAS ANTIGUAS Y DECIDO REGRESAR A LA PAGINA PRINCIPAL HACIENDO CLICK EN EL TÍTULO, NO ME REDIRECCIONA AL INDEX. AYUDA POR FAVOR. Mi blog es http:/perump3.blogspot.com/

Juany Dj.
Gracias

YoMatías (Again) dijo...

Hola! Gracias ahora si funcionó!! ;) lo que spi no se si se me hace a mí no más o la imágen fué super grande y el menú quedo medio corrido...¿como hago para poder correr el menú más hacia la derecha o agrandar más lo que sería la parte donde aparece el texto del blog??

YoMatías (Again-> again) dijo...

Hey! espera...encontre otra entrada que decía eso pasra cambiar el menú...perdón n_ñ|recién lo veo XD ...cambié de dirección el menú y ya quedo bien...Gracias = ;)

Andrés dijo...

Hi.
Juany Dj: Si haz reemplazado los dos codigos que menciono en la publicación, bien, pero me parece que has borrado esto:
<a expr:href='data:blog.homepageUrl'> ...</a> en ningun momento he escrito que borraran eso, probablemente ese seria el error que has cometido. Asi que sera asi:
<a expr:href='data:blog.homepageUrl'><tu-imagen></a> y ya. Esto quiere decir que cuando le das click a tu imagen vuelves a la página principal.

Matías: Me parece que sufres al poner la imagen, jejeje, cuestión de paciencia y hacerlo tranquilamnete.
Bye.
PD: Gracias a los dos por la visita.

YoMatías dijo...

eh..no..osea al principio si...y no era en mi blog personal era en ooooootro de los 50.000 que tengo por ahi XD pero ya lo resolví...lo de la imágen en el título tarde dos horas y luego le capte (ese que nunca cayó en el chiste XD)pero ahora anda bien..el tema del menú era que se quedó en el medio...pero encontré otro dato que tiraste para cambiar la posición del menú y se arreglo ;) = voy a probar lo que me dijiste a ver que onda...gracias :D

MeriPompis dijo...

hola! gracias por tus consejos, la verdad es q son muy utiles, el problema que tengo es q no puedoevitar q la imagen salga pixelada, hice la imagen 750x225, pero se em sube pequeña y cuando la cambio en el código pues me sale demasiado pixelada. Lo intenté con lo de la ruta de imagenq contiene s1600 porque se supone que es la de tamaño real pero entonces no me funciona... cuál es el problema??
muchas gracias!

Andrés dijo...

Hi.
Meripompis: Practicamente tienes que jugar con los valores de la imagen, con el ancho y alto. Conviene subir una imagen que sea grande para asi jugar con los valores ancho y alto, para que no se pierdda los pixeles, cuestion de jugar. Porque para poner tu imagen en tu blog debe ser unos 700px ó 800 aprox.
En todo caso puedes utilizar power point, te puede ayudar en algo pones la imagen, la grandas o la achicas, luego la ves como diapositiva, capturas la imagen y de ahi la pegas en paint. Esa es una alternativa. Cuestion de como lo veas fácil
Bye.
PD: Gracias por las visita.

Bethlehem dijo...

A MI NO ME SALEEE...BUUUUAAAA, es que recien estoy entrando a esta onda de los blog's :) seguire intentando

ZEUS dijo...

Hola Andres, en primer lugar debo felicitarte por tu blog. Realmente es de mucha ayuda.
Te consulto ya que segui todos los pasos al pie de la letra, pero la imagen no aparece.
Gracias!!!

Andrés dijo...

Hi.
Bethlehem: Seria bueno que te guies del ejemplo que pongo al último, puedes subirlo en Photobucket o en ImageShack y lo pegas en el título de tu blog.

Zeus: Igualmente para ti, guiate del ejemplo que pongo al último.
Bye.
Gracias a los 2 por su visita.

Mari - Viges dijo...

Gracias Andres, las explicaciones de poner una imagen en el titulo me han ido bién, lo conseguí cuando le cambie los valores a la imagen. El problema ahora es que no sale el título,pero si no puede ser ya está bién así. Gracias.

Andrés dijo...

Hola Mari-Viges.
No te dés por vencida, de que sale sale.
Por lo que te entiendo es que tu quieres que salga tu imagen con el título encima, se puede.
Practicamnete este post, colocar una imagen por el título, el cual indico como borrar el título entonces no lo borres.
Ahora bien, dentro de unos días publicare como poner una imagen en la cabecera, con respecto a la plantilla que usas. Quizas por ahi te puede gustar más y te salga bien.
Bye.
Gracias nuevamente por la visita.

MRevenga dijo...

pues no me extraña que tenga tantos comentarios este post, es que cuentas unas cosas realmente interesantes, me ha salido a la primera, mil gracias

Chino dijo...

Andrés: hice todo bien, pero no carga la imagen nunca. ¿Tendrías alguna idea de lo que pasa?

Desde ya, muchas gracias.

Andrés dijo...

Hi.
Chino: Que raro que no te salga la imagen probablemente has hecho algo mal o sino guiate del ejemplo que pongo casi al último.
Bye.
Gracias por la visita.

adriana dijo...

Muchas gracias Andrés. Muy útil y bien explicado, por fin pude hacerlo! jeje
Mira que lindo me quedó :)
http://laluna737.blogspot.com/

Gracias de nuevo!

Andrés dijo...

Hi.
Adriana: Visite tu blog y te quedo muy bien. Ahora si la pregunta es como borrar ese cuadro o border, tendrás que leer el post acerca de: poner una imagen en la cabecera con la plantilla Minima.
Bye.
Gracias por la visita.

Robintxu dijo...

yo tengo la plantilla TicTac (Blueberry) y no me sale tengo todo exacto y depues de 4 horas sigo sin conseguir que funcione.

Me estoy volviendo loco.

Andrés dijo...

Robintxu: He probado con todas las plantillas y si sale, es probable (como cosa mia) tenga que modificar este post porque ha cambiado en algo su código blogger, me refiero para poder ubicarlo bien.
Visitando tu blog, a la vez he probado tu imagen, y si me sale. Pero tu imagen es demasiado grande para que lo pongas como título, seria bueno que lo pongas en la cabecera, hace poco he publicado sobre eso, si no lo encuentras, entonces anda a Etiquetas (de mi blog), clic en Preguntas frecuentes y busca: Como poner una imagen en la cabecera, ahí explico referenta a esto.
Gracias por la visita.
Saludos.

Isildur dijo...

Saludos Andres, el tema que pusiste es muy bueno y verdaderamente gracias por la explicacion paso a paso.. ahora bien tengo unas dudas si podes responder agradeceria mucho.

1. si no quisiera alojar mi imagen en algun sitio como el que tan amablemente recomendaste como puedo hacer la modificacion?
2. y para alojar otra imagen pero no en el titulo de el blog si no que al pie de este como lo haria?

Si tenes tiempo pues respondeme y si no pues trankilo no te preocupes igual el tema que pusiste ayudo bastante.. gracias de nuevo...

Saludos de El Salvador...

Andrés dijo...

Isildur: Supongo que te refieres al modificar el ancho y el alto. Tendrías que utilizar Photoshop o puede ser Microsoft Photo Editor también, para que no se distorcione la imagen.
En cuanto a lo segundo no he publicado nada sobre eso, pero lo tendré presente para un post o mejor dicho como un pedido.
Gracias por la visita.
Saludos.

Isildur dijo...

Bueno verdaderamente el ancho y alto de la imagen ya esta modificado...
Me referia a obtener la ruta de la imagen sin necesidad de alojarla en algun otro sitio... igual estare pendiente de algun posible post.. gracias de nuevo...

Marcos José dijo...

Hola Andres, me gustaria que me echaras una mano.
Veras quisiera poner un mensaje en la barra de interner en la de abajo. Igual que tu tienes y que sale..."Bienvenidos a Ayuda para el Blog..."

Andrés dijo...

Marcos: He publicado acerca de eso, asi que tienes que ir aquí o sino busca ¿Cómo poner un texto en movimiento en la barra de estado y título?, eso está en preguntas frecuentes.
Gracias por la visita.

Vitor dijo...

Hola Andrés!
Ante todo te agradezco toda la ayuda que das por este medio a todos los que queremos armar nuestros propios blogs y andamos cansados de los templates de porquería que da blogger jaja.

Por el otro, a ver si me podés ayudar con algo.

Hace unos días armé un blog nuevo, http://cdboxset.blogspot.com y tengo un error en el encabezado que no sé cómo arreglar. Si te fijás, al entrar el cuerpo del blotg como que "se come" parte del encabezado, cortándolo. Lo raro es que no es que esté ubicado de esa manera y entonces queda sobre el encabezado, o que el encabezado esté muy abajo, sino que alternativamente aparece cortado o no, por ahí aparece bien y cuando hacés scroll, al volver arriba está cortado. Y ya pude comprobar que no es un error de MI navegador, ya que en otros lados se ve igual.

Así que bueno, te invito a que veas el blog, así entendés bien a lo que me refiero, y si me podés dar una mano, te súper agradezco.

Saludosss

Victor

cd-box.set dijo...

error: la dire del blog es http://cd-boxset.blogspot.com con guión.

Saludos

Victor

Andrés dijo...

Vitor: Ya visite tu blog y deje un mensaje, se ve muy bien.
Gracias por la visita.

Babel dijo...

Creo que he seguido todos los pasos, ylo he intentado varias veces, pero no me sale.. y no sé porqué.
Aprovecho para darte las gracias por tu blog.. me he aprovechado de tus consejos para crear el mio, que aún es muy reciente. Muy muy agradecida, un saludo.

Mandrake132 dijo...

vale compadre se le agradece :D:D

Gonzalo Lagos Martínez dijo...

Hola es la primera vez que escribo y es para preguntarte lo siguiente, ccómo puedo colocar un imagen en el header, tengo una plantilla son of moto de 3 columnas, pero me es imposible colocar una imagen arriba, he intentado de todo, pero nada resulta, hice este truco y tampoco.

Por FAVOR Ayudame.

Mi blog es: www.estadiogermanbecker.com

Muchas de las cosas que tengo ahi son gracias a tu blog.
Muy Bueno.

Mi correo: gonzaloelagos@gmail.com

Julio Cesar Ceja dijo...

saludos Andres tienes un blog de muchissima ayuda
intente hacer lo ke dijiste pero no logro encontrar como

soy nuevo en esto y preguntarte lo ke otro ya han hecho es una estupides pero mira uso la plantilla DOTS DARK si me puedes ayudar te lo agradeceria mucho me registre en blogger el 20 de febrero del 2008

http://peli-culeandoyotrascosas.blogspot.com/

gracias de antemano!

elias dijo...

hola gracias por preocuparte en ayudar siempre es bueno que algun samaritano pueda entregar sus conocimientos sin duda que tu inteligencia te ha llevado a estar mas arriba que nosotros algunas pequeñas cosas las manejo pero a brir tu blogspot me doy cuenta que no se nada es por eso que te pido tu ayuda.
1.-como colocar una cacion en mi blogspot. al abrir y que se escuche siempre.

2.- como colocar una imagen, foto arriba en el titulo sin perder el titulo. muchas otras cosas mas pero te dejaria aburrido y no me pescarias mucho gracias. el resucitado te bendiga.

Dr. Pablo A. Irigoyen dijo...

Excelente blog, te felicito es de gran ayuda. gracias.-

tumotoclásica dijo...

Hola Andrés:

Me ha sido de mucha utilidad tu Blog, Enhorabuena y Gracias. Si quieres ojear el mío:

http://tumotoclasica.blogspot.com/

Salu2.

xana dijo...

Hola Andres,quisiera felicitarte por tu gran tabajo y ayuda a las "torpes" como yo.Mi pegunta es como tengo k hacer para cambiar el titulo de mi blog por un generador de texto,por mas k lo intento y busco informacion de como hacerlo no doy con ello.Muchas gracias y un saludo desde España.

carlos dijo...

Felicidades por el blog! Yo quiero contarles de un sitio que se llama PCzeros que tiene de todo para el blog o página web. Hay cronómetros, calendarios, Buscadores,
relojes digitales, fondos para el blog, fechas y horas, animaciones y otros accesorios para el blog
Se los recomiendo.

Related Posts with Thumbnails
Últimos Post