Páginas

Cómo personalizar la descripción del blog en Blogger

Sí, porque cambiar por ejemplo el tipo de letra y color del título es fácil: es una de las opciones que aparecen en la opción "avanzado" del diseñador de plantilla de Blogger pero ¿y la descripción?
¿CÓMO PERSONALIZAR LA DESCRIPCIÓN DEL BLOG?
Cómo personalizar la descripción del blog en Blogger

Bueno... pues con un poquito de CSS ¡claro!Por ejemplo:

 ¿CÓMO CAMBIAR EL TIPO DE LETRA?
En este caso añadiendo esto:

.Header .description{
    font-family: 'Schoolbell';
    font-size: 26px;
    color:#c9a10b;
    font-weight: regular;
  } 

un código que te permite cambiar la fuente, su tamaño, el color

¿CÓMO CENTRAR LA DESCRIPCIÓN?
Por defecto, la descripción aparece a la izquierda (left) pero si la preferís centrada, entonces tendréis que añadir una línea más al código anterior:
 text-align: center
(si os gustase más a la derecha, entonces tendríais que poner right)

y por último
¿CÓMO VARIAR EL ESPACIO ENTRE EL TÍTULO Y LA DESCRIPCIÓN DEL BLOG?
Añadiendo estas otras dos líneas de código:

 margin-bottom: -15px !important;
    margin-top: -30px !important;


donde tendréis que ir probando con distintos valores: el primero de ellos define la distancia entre la descripción y el cuerpo del blog, y el segundo la distancia entre descripción y título.

Cómo personalizar la nube de etiquetas de Blogger

En mi opinión, el gadget de etiquetas o categorías de Blogger no puede faltar en un blog ¿por qué? Pues porque sirve a nuestros lectores para ver "de un plumazo" qué temas pueden encontrar en nuestra página, y además para finalmente acceder a ellos con un sólo 'clic'
Por eso, si no queremos prescindir de esta herramienta, lo mejor que podemos hacer es tratar de personalizarlo para que quede bien integrado con el resto del diseño. Y para ello hoy os traigo un par de trucos aplicables a la segunda de las opciones que nos ofrece Blogger
LA NUBE DE ETIQUETAS
Cómo personalizar la nube de etiquetas de Blogger

¿CÓMO CENTRAR EL TEXTO DE LA NUBE DE ETIQUETAS?
Y así conseguir que la nube realmente parezca una nube, ya sabéis que por defecto el texto sale justificado...

Para ello tendremos que entrar en 
plantilla > personalizar > avanzado > añadir CSS
y pegar esto:

/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}


¿CÓMO CAMBIAR EL COLOR Y LA FUENTE DE LAS ETIQUETAS?
El gadget genera distintas etiquetas con el formato .label-sizeX, siendo X un número del 1 al 5, de manera que las etiquetas que más se utilizan llevan un 5 y las que menos un 1, pasando por 2, 3 y 4 para los valores intermedios. Aprovechando esto podemos realzar con colores, tipos y tamaños de fuente distintos cada una de las etiquetas según su densidad ¿Cómo hacerlo? Pegando esto:

/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}
.label-size-1 a {color: #eee; font-size: 12px;}
.label-size-2 a {color: #996666; font-size: 14px;}
.label-size-3 a {color: #333; font-size: 18px;}
.label-size-4 a {color: #eee; font-size: 24px;}
.label-size-5 a {color: #990000; font-size: 30px;}


¿CÓMO ENMARCAR LAS ETIQUETAS?
Es decir, ponerlas dentro de unas cajitas rectangulares dispuestas unas al lado de las otras. Para ello el CSS que tendremos que añadir es este:

/* Etiquetas enmarcadas con efecto zoom */
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block; 
margin: 2px 2px 0 0; 
padding: 4px; 
text-transform: uppercase; 
border: 1px solid #996666; 
text-decoration:none; 
font-size:12px; 
color:#666; 
background: #eee; 
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover { 
border: 1px solid #000; 
color: #000; 
background: #fff; 
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}


Retratos: de blanco y negro a color con efecto vintage

El antes y el después...