Viajar por Europa

marzo 15, 2011

configurar titulos sidebar blogger draft

Decorar titulos de los widgets y configurar los títulos sidebar es exactamente la misma cosa, crear un rectángulo de color alrededor del título, utilizando código CSS, como se puede apreciar más abajo.

Los titulos del sidebar de las plantillas blogger draft  se pueden configurar facilmente. La verdad es que siempre he visto soluciones para estas etiquetas de blogger de las plantillas mínimas, pero probando sobre las nuevas plantillas de blogger he encontrado como situar los códigos CSS  y así poder personalizar todos los títulos de los widgets configurando a tu gusto el sidebar. Recuerda que en otro post decoramos en el sidebar titulos con imagenes.


Pasos que hay que dar para decorar tus títulos:

1º Entrar en diseño y acceder a la plantilla HTML
2º Comprobar que previamente has descargado una copia de la plantilla actual.
3º Mediante CTRL+F buscar /* Main justo antes pegar las liguientes lineas. Si no encuentras /* Main la alternativa es buscar /*Headings

.sidebar h2 { border: solid blue 1px; background-color: yellow; color: blue; font-family: 'Arial'; font-size: 20px; font-weight: normal; height: 30px; line-height: 30px; text-align:center; width: 300px;}


Para facilitarte la tarea, te incluyo como queda en el HTML de la plantilla tomando como referencia  /*Headings


/* Headings

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

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
margin: 0 0 .5em;
}
.sidebar h2 {  -moz-border-radius: 5px;  background-color: DarkRed;  color: yellow;  font-family: 'Century Gothic';  font-size: 20px;  font-weight: normal;  height: 20px;  line-height: 20px;  text-align:center;  width: 300px;}/* Widgets
----------------------------*/



En rojo lo que hemos añadido.

Ejemplo de personalización sencilla y simple para personalizar el titulo en el sidebar de blogger draft (plantillas nuevas).


otro título más

Los colores los puedes poner igualmente en código al que estamos acostumbrados (ejemplo #777777) por ello te incluyo un enlace a una paleta de colores que es utilísimo.

Algunos comentarios que te pueden ayudar para configurar el decorado del título de los widgets:

-moz-border-radius: Propiedad que suaviza las esquinas. Solo visible con Mozilla Firefox.
color: se refiere al color de la escritura (color de la fuente)
fonr-family: fuente
font-size y font-height: tamaño en pixeles
font-weight: puede ser normal o bold (negrita)
text-aling: center; right a la derecha o left a la izquierda
width= ancho del decorado (rectángulo) del titulo

Te recomiendo esta web de para que investigues,puedes ver algunos ejemplos de títulos personalizados en vagabundia.blogspot Y como queda el blog en aprendiendo blogger

No hay comentarios:

Publicar un comentario

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.