martes, octubre 10, 2006

Como poner una imagen / foto en el título que, además lleve al home, en blogger Beta

Hola lector, en mi búsqueda por mejorar mi blog he intentado ponder varias veces una foto en el título, que además lleve al home del sitio. Nunca lo había conseguido, pero con la ayuda del blog de blog logré dar con la solución para Blogger Beta... pero solito. Para el BBeta el asunto es un poco diferente al normal, asi es que atentos.
Bueno el asunto es lograr lo que yo ya tengo en el Blog, haz click en el título y sabras encontraras lo que buscas.
Bien primeros pasos, es tener una foto del ancho del cuerpo del blog, en mi caso son 740 píxeles, pero el tamaño por defecto es 650. Si no han modificado su template deben tenerlo presente, una foto mas ancha que el cuerpo del blog provocará un pequeño desastre con la estructura.

El ancho del blog, se ve en esta sección:

/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:650px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}


Donde dice "width" el original dice 650 pixeles, yo lo tengo en 740.

Después debemos subir la imagen, del ancho adecuado, a algún servidor. Puede ser el mismo blog. Pero debemos tener la dirección URL exacta de la imagen.
Si la subimos al mismo blog será algo asi:
http://photos1.blogger.com/blogger2/Aqui va tu imagen.jpg

Después, Para lograr nuestro objetivo debemos encontrar esta sección casi al final del template:

<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title="
Aqui va el nombre de tu blog" (Header)' type='Header'/>
</b:section>
</div>


Reuerden que ahora blogger beta funciona con sistema de "widget" o sea que ciertas partes del blog, como el "About me", son manipulados como objetos. Estos no pueden ser modificados porque al hacerlo se desconfiguran y no funcionan. Por esta razón este encabezado debe ser eliminado, al eliminarlo se borra el título de tu blog que aparece arriba del blog.

Bien, ahora la magia. Debemos reemplazar la sección anterior, por lo siguente:

<div id='outer-wrapper'>

<a href=
'http://Dirección de tu blog .blogspot.com/' title='Comentario sobre tu blog'><img alt='Nombre de tu blog' border='0' src='http://photos1.blogger.com/blogger2/Aqui va tu imagen.jpg'/></a>

Una vez que escribamos esto, abremos eliminado el widget del título y al guardarlo pedirá confirmar esto ... espero hayan guardado su template :P jijiji

Notas importantes:
- Obviamente lo que está en negrita es para que lo noten no para que esté en negrita en el template (comentario para el novato, bien novato).
- Respecto al "comentario sobre tu blog", es lo que yo pongo como subtitulo "Un intento por entenderme", si ustedes ponen el cursor dobre la imagen del título del blog, aparecerá un pequeño recuadro de descripción que dice eso.
- Sobre "El nombre de tu blog" es para que aparezca asi en el título de la ventana, o pestaña.

Ojo, si van al editor gráfico del blog que tiene blogger, en la sección "Page elements" aparecerá la imágen que han direccionado en el encabezado, pero descuadrada. No se preocupen, podrán seguir editando a través del editor automático, sin ningún problema.

Bien creo que es todo, si tienen consultas sobre aspectos de mi blog, pregunten :D

5 comentarios:

cabmill dijo...

Que tal.
Sobre eso de editar el template le agarré algo de miedo, cuando recien eempecé mi blog me puse a editar el template como nadie lo habia hecho, finalmente todo quedó descuadrado, feo, menos mal que tenía un backup para el template, así que de ahí que no lo edito, pero ya voy a probar lo que dices :P
Saludos.

Jhonny Padilla dijo...

gracias por la informacion, pero yo tengo una minima black y los datos que pusiste son diferentes, sbes que puedo hacer?

Sr. burrO dijo...

me sirvio, buena ayuda

http://burroblogpty.blogspot.com/

ADF 2009 dijo...

hay una parte que no entiendo, que parte es la que debo reemplazar, si es todo el parrafo que pusiste ahi o solo la parte del widget?
de antemano muchas gracias

Rodrigo C. dijo...

Hola ADF 2009:
Lamento la demora, he estado un poco ocupado.
Lo que debes reemplazar es el widget por este párrafo, y lo que está en negrita por lo que corresponda en tu caso.
La verdad, esta modificación la hice hace mucho, no sé si actualmente se puede hacer esto de otra forma, lo que sí te puedo decir es que este método funciona, como evidencia está mi blog.
Eso.