Sobre Fuentes y Estilos
Hola! Como va?
Yo, siento que peso mil kilos menos. Ya di mi primer presentación de la Tesis y por suerte, salió bien. Ahora queda darle un poco mas y acomodar mi cabecita al hecho de que voy a ser Ingeniera en Sistemas. Que tul? Jajaja!!
La semana pasada le di "una lavada de cara" al blog y por suerte tuvo una buena acogida (?) de parte de Uds!
Fue Srita Lugosi, del Blog "Confesiones de una Volátil" quien me pidió si podía compartirles como cambiarle las fuentes (o los tipos de letra) de tu blog.
Son pasos sencillos. Prometo.
Lo primero que vamos a hacer es entrar a nuestro escritorio blogger. Donde tenemos listados nuestros blogs. Yo pixele los datos no importantes, estoy usando un blog de prueba que me arme para estas cosas y como blog de prueba, tiene cualquier cosa!!
Luego de entrar y ver nuestros blogs listados, pegadito al icono de Nueva Entrada, tenemos un botón que genera un menú desplegable
 |
| Click en "Plantilla" para modificarla |
Ahi, hacemos click en Plantilla para entrar a nuestra platila HTML y poder modificarla.
Pero MOMENTO!!! Antes de realizar cualquier cambio y hacer "macanas", lo primero que vamos a hacer es guardar la plantilla actual, cosa de, si hacemos algo mal, podamos dejar todo como esta.
 |
| No nos olvidemos de guardar una copia de la plantilla actual!!! |
Luego vamos a editar HTML. Hasta ahi nos quedamos.
Ahora, abrimos otra ventana/pestaña en nuestro navegador y vamos a: http://www.google.com/fonts/. Ahi encontramos varios tipos de fuentes para elegir y usar en nuestros blogs.
Cuando encontremos una de nuestro agrado, hacemos click en el iconito que les marco en la siguiente foto, llamado "Quick Use!".
Esto nos va a llevar a una pagina donde google nos cuenta cual será el impacto de esta fuente en la carga de nuestro blog, como así también los distintos estilos de la fuente (Bold, Italic). Tildamos las que querramos y vamos hacia abajo.
En el punto 3 y 4 son los relacionados con nuestra plantilla en Blogger.
En el punto 3, nos solicita que para usar esa fuente elegida, tenemos que agregarla a nuestra plantilla. Lo que vamos a hacer es copiar ese link y ponerlo inmediatamente después del tag html <head>.
Si no lo encontramos, hacemos click DENTRO del código html en blogger y hacemos ctrl+f y se nos abre un cuadro de texto arriba a la derecha. Ahí buscamos <head>.
La modificación que le vamos a hacer a esta linea es la siguiente:
Esta es la que copiamos:
<link href='http://fonts.googleapis.com/css?family=Life+Savers' rel='stylesheet' type='text/css'>Esto es lo que vamos a pegar:
<link href='http://fonts.googleapis.com/css?family=Life+Savers' rel='stylesheet' type='text/css' />
Lo que hacemos con esa barrita es cerrar la etiqueta link de HTML. Sino, de otra manera, nos tirara error de HTML.
Ahora se viene la parte interesante. Que comience el juego!!!
Vamos a agregar esta fuente donde querramos. Si la queremos como fuente de texto de nuestras entradas, lo hacemos en la definición de .post-body: (Ojo que puede cambiar segun la plantilla!)
.post-body {
margin:0 0 1.75em;
line-height:170%;
font: Life Savers;
}
Tenemos que investigar bien nuestra plantilla:
Esto es por lo menos en la mia:
- Las etiquetas h1 suelen ser los títulos mas grandes, como el header
- Las etiquetas h2 suelen ser los títulos de los widgets
- Las etiquetas h3 suelen ser los títulos de las entradas
Si vemos que la fuente nos quedó pequeña en la entrada, podemos modificarle el tamaño
.post-body {
margin:0 0 1.75em;
line-height:170%;
font: 12px Life Savers;
}
Acá le damos un tamaño de 12 pixeles a nuestra fuente Life Savers.
Para ver los cambios de nuestra plantilla, arriba, tenemos el GUARDAR PLANTILLA. Damos click ahi y mas arriba tenemos el "Ver Blog". Hay que esperar que el botón de Guardar Plantilla quede activo nuevamente, esa es la señal que todo se guardo. Ahora, chequeamos que nuestro cambio se haya implementado.
Espero que les sirva, que me hayan entendido y que sus blogs queden preciosos!!
Muchas gracias Luciana, la verdad es que siempre había querido saber esto, me la guardo. Un besote guapa.
ResponderEliminarUn post excelente para las cuadradas como yo, jajaja. Saludos!
ResponderEliminarAwwwwwwwwwwwwwwwwwww!! Que linda eres, Lu!
ResponderEliminarEl tutorial quedó precioso, y aunque no me sirvió [por la plantilla de las viejas], me motivó mucho. Tanto, que le cambié un poco las letras en espera de hacer un header que me convenza.
Un beso y amo que compartas tus conocimientos!
genial post, me será útil para cuando no pueda explotar a mi amigo ingeniero jajaj
ResponderEliminarhttp://wildbeautyontherocks.blogspot.com.ar/
AY QUE GENIA!!!!!!! SOY UN QUESO PARA ESTAS COSAS ASI Q ME VIENE GENIAL UN TUTORIAL PARA CUANDO BUSQUE CAMBIOS JAJAJ
ResponderEliminarQué bueno Lu! la fuente nueva es genial.
ResponderEliminarMe encantó la firma con el labial también <3
Besoo!