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.

FREEBIES: 10 fuentes estilo "grunge"

El GRUNGE es un estilo musical surgido en Seattle a principios de la década de 1990 como derivación del punk-rock. Se caracteriza por el empleo frecuente de la distorsión, los potentes guitarreos y la alternancia de partes suaves con partes muy estridentes en las que se canta a gritos, lo cual les confiere a menudo cierto aire depresivo.

Relacionada con este estilo, la estética "grunge" es (como el significado de la palabra nos indica) de apariencia descuidada, al igual que estas tipografías: 10 fuentes "sucias", diseñadas por

Misdemeanor
None Shall Pass
ShotGun Wedding

Fuck Authority
fuentes e imágenes de muestra diseñadas por

Los logotipos de los álbumes de Madonna

Una recopilación de los logotipos de los álbumes que la diosa del Pop, Madonna, ha publicado durante estos casi treinta y cinco años de carrera musical.
Para sus fans, y para los entusiastas de la tipografía porque en definitiva son portadas creadas por los mejores diseñadores gráficos, y ¿por qué no verlo también así? claros ejemplos de
combinaciones de fuentes que "funcionan"

Los logotipos de los álbumes de Madonna



combinaciones de fuentes que "funcionan"



 







 

 
 

  
 
 
 
 
 




La letra de Donald Trump, una fuente para descargar gratis

¿Os gustaría escribir como Donald Trump?
A ver... matizo: no pregunto si os gustaría escribir las cosas que él escribe (y piensa) sino si os gustaría escribir con un tipo de letra como la suya. Porque, si es así, ya es posible y os cuento por qué.
Parece ser que al candidato a presidente de la nación más "tecnológica" del mundo no le gustan mucho los ordenadores, de manera que cuando leyó en la revista Vanity Fair este reportaje que no era de su agrado, no se le ocurrió nada mejor que responderles de la siguiente manera...


La letra de Donald Trump, una fuente para descargar gratis

... añadiendo diversas anotaciones escritas de puño y letra sobre la misma página de la revista. 
Y parece ser que esto en él es bastante habitual, de manera que a un avezado diseñador gráfico y tipógrafo se le ocurrió estudiar la caligrafía de Trump...


... y con ella crear una fuente:
BF Tiny Hand, la "handwriting" de Donald Trump
BF Tiny Hand, la "handwriting" de Donald Trump


Una fuente bautizada como la BF Tiny Hand Font y que, por supuesto, se puede descargar de forma gratuita (tenéis el enlace AQUÍ) confiando en que se convertirá en... 
¿la nueva y omnipresente Comic Sans?
¿os animáis a instalarla y utilizarla en vuestros eMails y documentos de Word?

( imágenes: FastCoDesign y BuzzFeed )

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;
}