Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imagen como cabecera del blog y con enlace a la portada

Ya hemos visto la forma de colocar cualquier tipo de imagen como cabecera del blog o aplicar un fondo de imagen en movimiento al header.

El poder hacer clic sobre la imagen / logotipo que usemos como cabecera y acceder fácilmente a la portada o inicio del blog es una comodidad que debería ser ofrecida a nuestros lectores.

Por suerte, no solo es posible enlazar la portada sino que también podemos hacerlo con páginas externas al blog, así como entradas individuales o secciones de nuestra bitácora.

El primer paso será crear una copia de seguridad de nuestra plantilla. Si no sabes como hacerlo, lee esta entrada.

Si actualmente utilizas una imagen como cabecera del blog, guárdala en tus documentos para evitar perderla ya que eliminaremos su código.

Diseño>Edición de HTML>expandimos artilugios



Busca estas líneas:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y un poco más abajo encontrarás las etiquetas de cierre correspondientes:

</b:section>
</div>

Que estarán encima de esto:

<div id='content-wrapper'>

Elimina todo el contenido que está entre esas líneas (sin incluirlas).

Seguidamente introduce la línea en negrita que puedes ver a continuación:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML85' locked='false' title='' type='HTML'/>
</b:section>
</div>

Guarda la plantilla.

Seguidamente recibirás una advertencia comunicándote que el widget denominado Header1 va a ser eliminado. Pulsa el botón Eliminar widgets.


Trucos blogger y ayuda blogger

Ahora, en el apartado de Diseño>Elementos de la página, comprueba que el elemento "Cabecera" que contenía el título de tu blog ha cambiado por un gadget HTML-Javascript.


Trucos blogger y ayuda blogger

Ahora tan solo será necesario hacer clic en Editar, en ese gadget y pegar el código que insertará una imagen con enlace:

<a href='DIRECCION ENLACE'><img border="0" src="URL DE LA IMAGEN" /></a>

Reemplaza DIRECCION ENLACE por la dirección de la portada de tu blog o el sitio web que deseas enlazar en la cabecera. En URL DE LA IMAGEN introduce la dirección de la imagen o el logotipo que guardaste en tus documentos, al inicio de la entrada.

No olvides que para conseguir su URL debes subir la imagen a un servidor como puede ser el propio blogger (en esta entrada explico como subir imágenes).

Guarda el gadget para terminar.

Camino del sur dice...

Gracias por tu generosidad.

Un gran abrazo

María PIlar

馬丁 dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

Gracias a ti, María, por la amabilidad y el comentario.

Un fuerte abrazo.

Jaime Trujillo Escobedo dice...

馬丁, ¿Te refieres a la distancia entre la cabecera y el título de la primera entrada? ¿o a la distancia entra la sidebar (barra lateral) y la cabecera?

En cualquiera de los casos aquí te dejo los pasos a seguir...

Para acortar la distancia de la barra lateral, busca este bloque de CSS en tu plantilla y añade lo que ves en negrita:

#content-wrapper {
margin-left:0;
margin-top:-3px;
}

Una vez hecho eso, busca este otro bloque:

#main {
float:left;
line-height:1.5em;
margin:0 0 0;
overflow:hidden;
padding:0 0 0 1em;
width:600px;
word-wrap:break-word;
}

Y reemplaza la línea margin:30px 0 0; por la que aparece en negrita.

Haz vista previa para comprobar el resultado y guarda la plantilla para terminar.

馬丁 dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

No hay absolutamente nada que perdonar, 馬丁. En una entrada todo puede explicarse de manera sencilla ;).

¡Abrazos!

Ogni dice...

Aquí estoy Jaime! :) Pues en la nueva plantilla, no consigo encontrar esos codigos. Esto es lo que tengo en el header:

* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.Header img, .Header #header-inner {
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);
}

.Header h1 {
text-align: center;
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
text-align: center;
font-size: 130%;
}

Si crees que es posible lograrlo, genial!! si no lo dejaré con el título.

Muchas gracias Jaime.

Jaime Trujillo Escobedo dice...

Ogni, ¿Podrías indicarme la dirección del blog o la plantilla que utilizas? ¿Se trata de una plantilla prediseñada (descargada de algún sitio web) o de las que ofrece blogger?

Ogni dice...

Si claro!

http://nuevazelanda180.blogspot.com/

Era una plantilla prediseñada, a la que ya le he hecho algunos cambios. A ver como lo ves;)

Ogni dice...

no te llego mi respuesta Jaime?

Jaime Trujillo Escobedo dice...

Ogni, en ese caso reemplaza este bloque:

.Header h1 {
font:48px Georgia,Utopia,'Palatino Linotype',Palatino,serif;
text-align:center;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.3);
}

Por esto otro:

.Header h1 {
visibility: hidden; display: none;
}

Y en este bloque añade la línea en negrita:

.header-inner .Header #header-inner {
background:url("URL DE LA IMAGEN") no-repeat scroll 50% 50% transparent;
overflow:hidden;
}

Tan solo necesitas reemplazar URL DE LA IMAGEN por la dirección del logotipo o la cabecera y ¡listo!

Si necesitas algo más no dudes en decírmelo.

DELIO dice...

Hola Jaime, soy un ferviente admirador de tu blog por las muchas ayudas que me has proporcionado a pesar de mis escasos conocimientos en informática.
Me gusta varias a menudo el diseño de mi plantilla y para mi sorpresa y con tus ayudas, algunas me han quedado bastante aceptables.
Mi problema es el siguiente: utilizo un modelo de plantilla que ofrece el nuevo diseñador de plantillas de Blogger... ¿Ok? y no sé cómo eliminar el widget (gadget) que está colocado justo debajo de la cabecera y la columna de las entradas. Me distorsiona todo mi esquema.
¿Podría eliminar ese widget pata que la columna de los posts se equilibrara a la misma altura que la columna derecha de la sidebar?
Por favor, en caso de haber solución.. te rogaría que pudiese entenderte de manera fácil y sencilla pues no me manejo con soltura en estos temas.
Un fuerte abrazo y te felicito por tu estupendo blog .
Por si te sirve el mío es. http://malperthuis.blogspot.com

Jaime Trujillo Escobedo dice...

Delio, prueba a realizar lo siguiente:

1) Introduce un título inusual al gadget.
2) Accede a Diseño > Edición de HTML.
3) Sin expandir la plantilla de artilugios, localiza el título (utiliza las teclas Ctrl y F para abrir el buscador de tu navegador).
4) Aparecerá una línea similar a esta:

<b:widget id='TIPOGADGET' locked='false' title='MI TITULO' type='HTML'/>

TIPOGADGET mostrará el término que identifica al elemento de página (puede ser HTML1, HTML2, Image1...) y MI TITULO contendrá el título escrito.

Elimina enteramente la línea y listo.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo