Peponas Style: Diseño blog para primerizos

Diseño blog para primerizos

en 18:29

¡Hola!

Hoy os dejo un post sobre cómo cambiar la fuente de las entradas en nuestro blog, pero os quiero dejar también cómo hacerlo con el título de la entrada y cómo adornar el mío.

Supongo que haya muchas más formas y maneras pero no soy para nada experta en esto y sólo quiero compartir lo que yo he ido aprendiendo durante la creación de éste blog, el cual veréis cambiar poco a poco porque aun me quedan cosas que quiero mejorar.

Bueno, vamos al tema que me enrollo demasiado:

Antes de nada decir que leáis hasta el final antes de hacerlo, ya que hay dos métodos, el que yo hice y el fácil (sí, siempre encuentro lo fácil cuando ya he acabado lo más trabajoso).

Lo primero que tenemos que hacer es irnos a Google Font y buscar la letra que más nos guste de entre tantas. Una vez que la hayamos encontrado, vamos a pinchar en la parte de abajo, en los iconos pequeños, el que tiene la flechita mirando hacia la derecha (quick-use). Eso nos va a llevar a una página donde veremos un link que vamos a seleccionar y copiar, y NO vamos a cerrar la página porque justo debajo del link hay una línea que necesitaremos más adelante, la que dice font-family.


Una vez hecho esto, nos vamos a ir nuestro Blog---Plantilla--- Edición HTML y ahí vamos a pinchar dentro del cuadro de texto (en cualquier parte) y vamos a pulsar las teclas Ctrl + F

Veréis que nos aparece el buscador en la parte superior derecha del cuadro de texto HTML, ahí vamos a buscar la palabra head y mirad que está en las primeras líneas, normalmente entre la 4 y la 12 (además veréis que debajo de ella ya aparecen otros links. 

Pues simplemente damos a intro, y debajo de head PEGAMOS el link que tenemos copiado.

¡¡Pero atención!!

Hay un fallo, y es que cuando copiamos el link, a este le falta un símbolo, así que se lo vamos a poner nosotros. Este es el que falta:

En google font aparece así (ejemplo): <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>

Falta una barra que se consigue simplemente pulsando Alt + 7. Debe quedar así para que no nos de error al guardar la plantilla (Lo pongo en rojo): <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'/

     
                             

Una vez hecho esto ya tenemos nuestra fuente instalada en el blog, pero ahora hay que colocarla en el lugar que queramos, en este caso en las entradas.

Para eso volvemos a Google Font y a copiar esa línea que hay debajo del link que ya hemos copiado.


Volvemos a nuestra edición HTML y buscamos esto: post-body-post y nos saldrá algo así:

.post-body,.post {
 
 font-family: 'Poiret One', cursive;
}

(Es la que yo tengo)

Ya solamente tenéis que borrar "font-family: ´lo que sea´hasta el punto y coma, y pegar el que hemos copiado.

Guardamos plantilla ¡Ya está! ¿A que es fácil?

Para cambiar el título de las entradas, la mecánica es la misma, pero esta vez buscaremos en nuestra edición HTML h3.post-title

h3.post-title {
 font-family: 
'Poiret One', cursive;
}

De nuevo borramos desde font hasta el punto y coma y pegamos la que hayamos instalado y nos guste para nuestro blog.

Ahora os explico. Lo hemos hecho todo desde edición HTML, pero se puede hacer de un modo diferente y nos ahorramos de toquetear tanto la plantilla ya que si sabéis poquito, como yo, nos la podemos cargar antes de lo que pensamos.

El siguiente sigue los primeros pasos del anterior, vamos a google font, elegimos la fuente, copiamos link, lo pegamos debajo justo de head, guardamos y nos vamos a la página anterior, donde al lado de edición HTML pone "personalizar" en color naranja que se ve muy bien.

Ahí nos ponemos en el recuadro de la izquierda y pinchamos en Avanzado - Añadir CSS.

Una vez allí pegamos los códigos que os di antes y listo (pongo ejemplo):


Pinchamos en APLICAR AL BLOG y listo.

Para modificar el título del blog podéis hacer lo siguiente. Entramos de nuevo en Plantilla-Personalizar-Avanzado-Añadir CSS y copiamos el siguiente código:

h3.post-title, h3 {
color: #000000; 
border-top: 1px solid #000000;
border-bottom: 1px solid #000000
text-alingn: center;
}

El color lo podéis poner a vuestro gusto. Aquí os dejo la tabla de colores en la que os dan el código.

-Donde pone: 1px podéis cambiar la cantidad según queráis que el borde se vea más ancho o más estrecho. En mi caso lo dejé en 1 porque más me parecía demasiado a mi modo de ver. 
- Donde pone: solid significa que el borde será una línea, si queréis poner, por ejemplo, una línea de puntos, basta con cambiar la palabra solid por dotted.
-Donde pone: border-top, si quitáis el "-top" en lugar de línea será un cuadrado que encerrará vuestro título

El resto creo que se entiende bastante bien y podéis ir jugando e investigando.

Espero que os sea de gran utilidad y que lo podáis aprovechar en vuestros blog.

¡Os deseo un 2015 lleno de proyectos, sueños cumplidos y mucho amor!

Abrazos mil,



0 comentarios :

Publicar un comentario

 

Peponas Style Copyright © 2011 Design by Ipietoon Blogger Template | Make Money from Zazzle | web hosting