#3 - It's HMLT Time!: Centrar títulos, Separadores y Gadget

Ya estamos aquí otra vez para seguir con esta sección. Hoy pondré tres mini-tutoriales para los cuales empezaremos a toquitear la plantilla.

Empezaremos entrando a la plantilla tal y como muestran las dos primeras imágenes. Y antes de tocar nada os daré unos tips:

· Como veréis más abajo siempre pongo un título a TODO lo que añado, porque os aseguro que en un mes ya ni te acuerdas para que sirve cada cosa. Y para ello lo pongo entre barras laterales, /*explicación aquí*/, para que no lo confunda blogger con el html.

· Siempre que os pongáis a hacer esto: guardad la plantilla por si pasase algo. Para guardar en la primera imagen podéis ver el botón de: Crear/Restablecer copia de seguridad > Descargar Plantilla Completa.

Para centrar los títulos tenéis que entrar a la sección de: <b:skin>...</b:skin> y ahí ir al final y pegar:

/* Centrar Titulos Entrada

----------------------------------------------- */

.post-title {

text-align: center;

border-bottom: 2px solid #000000; /*Borde de Debajo del Título*/

border-top: 2px solid #000000; /*Borde de Arriba del Título*/

border-left: 2px solid #000000; /*Borde de la Izquierda del Título*/

border-right: 2px solid #000000; /*Borde de la Derecha del Título*/

}

¿Qué es cada parte?:
- Text-align: center; centra el título, si pones right se colocará a la derecha y left a la izquierda.
- border-bottom/top/left/right : coloca un borde debajo/arriba/izquierda/derecha.
- 2px solid : grosor del borde y que la linea sea continua.
- #000000 : color de la linea. Podéis mirar los colores en el Photoshop en la paleta de colores.

Si solo queréis centrar el título podéis borrar las líneas de los bordes.

De nuevo en la plantilla html tenéis que buscar (Ctrl+F):

<b:include data='post' name='post'/>

Si no os sale buscad: "<b:include data=" y luego ir mirando todos los que aparecen hasta que os salga el que pone arriba. Que no sé por qué a veces me pasa.

Justo debajo de lo anterior poner:

<center><img src='LinkImagen'/></center>

En "LinkImagen" poner el link de la imagen que queréis subir (la mía tiene de medidas 580*50 px). Guardar y... ¡listo!

Por fin el último tutorial del día, aunque no lo parezca he estado más de tres días con esta entrada.Para cambiar el título de los gadgets de las columnas hay que hacer el siguiente proceso que os voy a enseñar para cada uno de los gadgets.

Primero buscaremos el gadget que nos interesa en la plantilla, lo mejor es hacerlo por el título. Nos apuntaremos la id que tiene, en nuestro caso: "HTML1". Y ahora iremos a: <b:skin>...</b:skin> y al final antes de ]]></b:skin> podremos:

/* Imagenes para Títulos de Gadgets

----------------------------------------------- */

#HTML1 h2 {

background: URL(LinkImagen) no-repeat top;

height: 25px;

}

Donde yo he puesto HTML1 hay que poner la id que habéis mirado antes y donde LinkImagen vuestra Url de la imagen que habréis subido a imagenshack o photobucket. En height hay que poner la altura de la imagen, la mía tenía las medidas: 150*25 px, por ello he puesto 25 px. ¡Y guardar!

Para cambiar más gadgets simplemente añadís debajo de lo anterior:

#*** h2 {

background: URL(LinkDeLaImagen) no-repeat top;

height: 25px;

}

Volvéis a mirar la id del gadget que os interese ahora cambiar y así cambiáis todos los que queráis.
Como veis en la imagen aparece el título superpuesto encima de la imagen así que tan solo habrá que ir a: Diseño>NuestroGadget>Editar>Borrar el título y poner "&nbsp;">Guardar.

Espero que os sirva de algo todo lo descrito aquí que he tardado mi tiempo. Para la próxima entrada: poner una imagen a los comentarios anónimos, poner una imagen en un gadget y añadir la sección de: Otras Reseñas, que te recomienda otras entradas relacionadas.