¡Hola a todos! Cuarta entrega de la serie de tutoriales 'cómo hacer tu propia plantilla para Blogger'. En esta oportunidad veremos cómo modificar el encabezado o header de nuestros blogs.
Si nos remontamos a la primera entrada, les había contado que la cabecera de nuestro blog está contenida dentro de #header-wrapper. También vimos cómo modificar el ancho del mismo a nuestro gusto. Hoy veremos cómo podemos darle estilo al título o bien reemplazarlo por una imagen.
1. Modificando el título
Si lo que quieres es simplemente cambiar la letra, el color, el tamaño, etc. del título de tu blog lo haces desde #header. Ya sabes, font-family para el tipo de letra, font-size para el tamaño, etc.; cosas que hemos visto en más de un tutorial. En próximas entradas haré una guía de CSS para que tengan todo ordenado.
2. Reemplazando el título por una imagen
Si en cambio quieres colocar una imagen, lo que tienes que hacer es hacer tu imagen en cualquier programa de diseño prestando atención a las medidas que vas a utilizar y luego cargarla a un servidor con Tinypic.
Una vez tengas el link de tu imagen, vas a ir 'Editar HTML' en tu blog y vas asegurarte de dentro de #header-wrapper el 'width' coincide con el ancho de tu imagen, es decir si hiciste tu header de 900x500px, el width de header wrapper debe ser de 900px.
Luego vas a ir a buscar: <div id="header-wrapper"> te saldrá algo como lo que muestro a continuación y vas a eliminar lo que está dentro de la etiqueta, como te marco:
Una vez lo que hayas borrado, lo vas a reemplazar por esto:
Luego vas a ir a buscar: <div id="header-wrapper"> te saldrá algo como lo que muestro a continuación y vas a eliminar lo que está dentro de la etiqueta, como te marco:
Una vez lo que hayas borrado, lo vas a reemplazar por esto:
<img src="link de tu imagen" />
También puedes decidir colocar un header con image-map, en ese caso en vez de pegar el código anterior, simplemente pegarías el código que obtienes después de hacerlo.
Si no sabes qué es image-map o cómo hacerlo, puedes revisar este tutorial {cómo hacer image-map a tu header} que hice hace un tiempo.
Entonces ya lo único que te queda es reemplazr 'link de tu imagen' por el link que hayas conseguido cuando cargaste la imagen a Tinypic.
Puede pasarte que cuando lo pongas, te salga un pequeño borde por debajo o por encima de la imagen; si ese es tu caso, vuelva a #header-wrapper y debajo del width agrega: height: XXpx; reemplazando el XX por el valor de la altura de tu header y problema solucionado.
Recuerden que voy haciendo la prueba de cómo iría quedando el blog {aquí}
Y listo, ya tendrías tu blog con una cabecera! Cualquier duda, dejen su comentario :)
Entonces ya lo único que te queda es reemplazr 'link de tu imagen' por el link que hayas conseguido cuando cargaste la imagen a Tinypic.
Puede pasarte que cuando lo pongas, te salga un pequeño borde por debajo o por encima de la imagen; si ese es tu caso, vuelva a #header-wrapper y debajo del width agrega: height: XXpx; reemplazando el XX por el valor de la altura de tu header y problema solucionado.
Recuerden que voy haciendo la prueba de cómo iría quedando el blog {aquí}
Y listo, ya tendrías tu blog con una cabecera! Cualquier duda, dejen su comentario :)
Gracias , en serio queria dejar de usar plantillas de los demas , me incomoda , no solo por la codificacion , si no por el hecho que la mayoria son muy egoistas , y si uno no llega a hacer un fansite con su plantilla , si no un sitio de diseños , me piden que quite la plantilla y blablabla , gracias en serio , me encanta lo que haces aqui :3
ResponderEliminarBonita! Me alegra que te sirva esto <3 Es una pena que suceda lo que comentas, a mí no me molesta en absoluto que usen las plantillas que dejo para ustedes, me parece sumamente egoísta... Pero de todos modos, pienso que no hay nada mejor que hacer nuestras propias plantillas! Gracias por tu comentario, y un besito!
Eliminar