Complemento Para Tus Fuentes Para Tu Blog

complemento_para_tus_fuentes_para_tu_blog


Hola, hola como siempre antes de comenzar espero se encuentren muy bien. En la entrega de esta semana va a hacer sobre un tutorial sencillo y es un complemento para tus fuentes para tu blog


COMPLEMENTO PARA TUS FUENTES PARA TU BLOG

Recordarán que hay dos entregas donde muestro los pasos para agregar o cambiar el estilo de su fuente o fonts en sus entradas en blogger. En la primera son Dos trucos muy sencillos para tu blog y es en esta entrega donde muestro como agregar complementos en códigos CSS que ofrece Google Fonts para tu blog y en la segunda entrada es para agregar una fuente distinta en tus entradas siguiendo los mismos pasos de la primera entrada solo lo que cambia es el código. Recuerden que estos pasos los podrán hacer en un blog de pruebas antes de agregarlo a su blog principal aunque este paso a paso es muy sencillo.



Este complemento será para extender la variedad de fuentes para agregar a tu blog y no solo será de Google Fonts si no también de Font Library esta plataforma la he agregado como recomendación para encontrar una gran variedad de fuentes libres y aquí agregó el enlace para explorar un poco esta entrada.


COMPLEMENTO ⇒ FONT LIBRARY
Para comenzar con este complemento al entrar a esta página encontrarán las fuentes destacadas o podrán explorar el catálogo completo y donde dice Registrarse justo a un lado encontrarán los idiomas para la página y en la barra lateral encontrarán las categorías y el número de fuentes que contiene cada categoría para este pequeño tutorial yo elegiré Handwritting esta categoría ofrece fuentes muy bonitas y llenas de estilo en su diseño.


El nombre de la fuente es Odstemplik Regular  y como observan en el siguiente gif esta fuente tiene un diseño único. El enlace lo tienen en el nombre de la misma fuente por si la quieren descargar y para descargar a su computadora solo oprimen DONWLOAD ODSTEMPLIK y si no tienen aun o no conocen alguna herramienta para descomprimir estos archivos aquí agregó unas herramientas para explorar. La zona que ofrece los complementos para estas fuentes es donde dice USE THIS FONT, así como se muestra en el siguiente gif:

complemento_estilos


La imagen de esta zona será como la siguiente imagen:

captura_complemento_fuentes


Notarán que son dos códigos el primero se agregará en el html de su plantilla en blogger y el segundo es el código CSS. Para hacerlo se van a su blog  oprimen  Tema, oprimen Editar HTML y buscan  <head>  un enter hacia abajo para pegar el código se van a la página y copian el primer código y lo pegan. Como en el siguiente ejemplo: 


agregar-estilo-fuente


En el segundo paso es oprimir Vista previa del tema para revisar  si los cambios están bien hechos y el resultado será la imagen de su blog así como se muestra en el siguiente gif y oprimen Guardar tema al oprimir Atrás aparecerá  una pequeña ventana con un aviso ustedes podrán cerrar el aviso o aceptar y volver a oprimir Atrás sus cambios estarán guardados por eso siempre recomiendo que antes de guardar cualquier cambio deben oprimir Vista previa del tema para revisar si sus cambios van bien o podrán Revertir al oprimir Revertir los cambios o hacer todo este proceso en un blog de pruebas antes de agregarlo a su blog principal. 


guardar-resultado


➧COMPLEMENTOS EN CÓDIGOS CSS PARA TUS FUENTES
El segundo código es el complemento en css de esta fuente y será lo mismo con otras fuentes que ustedes quieran agregar. Hay una pregunta ¿Dónde agrego estos códigos  CSS? la respuesta es muy sencilla podrán utilizar los dos códigos de las dos entradas que aquí arriba encontrarán los enlaces.

El primer código será como este y lo encontrarán en la entradas Dos trucos sencillos para tu blog y los cambios solo será los códigos css de color azul:


<br />
<div style="text-align: center;">
<span style="font-family: 'Limelight', cursive; font-size: 20px;">CAMBIO DE FUENTE EN TÍTULO</span></div>
<br />

El resultado en código será como este: 

<br />
<div style="text-align: center;">
<span style="font-family: 'odstemplikRegular'; font-weight: normal; font-style: italic; font-size: 20px;">CAMBIO DE FUENTE EN TÍTULO</span></div>
<br />


Recuerden que este código es para aplicarlo en el html de su entrada en blogger. En los siguientes códigos de CSS de la entrada Agrega una fuente diferente en tus Entradas ustedes podrán comparar los complementos en códigos CSS de Google fonts, como de Font library. Pero antes para agregar dos estilos de fuentes sus códigos serán como la siguiente imagen, solo deben seguir los mismos pasos que se exploraron aquí arriba en un comienzo:




Solo cambia lo que esta marcado en color azul:


COMPLEMENTO EN CÓDIGO CSS DE GOOGLE FONTS
/* titulo-texto
----------------------------------------------- */
.titulo {
font-family: 'Limelight', cursive;
font-size: 20px;
text-align: center;
color: #000000;
padding: 10px;
}
.texto {
font-family: 'Kaushan Script', cursive;
font-size: 16px;
text-align: left;
color: #000000;
padding: 10px;
}
COMPLEMENTO EN CÓDIGO CSS DE FONT LIBRARY
/* titulo-texto
----------------------------------------------- */
.titulo {
font-family: 'odstemplikRegular';
font-weight: normal;
font-style: italic;
font-size: 20px;
text-align: center;
color: #000000;
padding: 10px;
}
.texto {
font-family: 'NimbusSanLConRegular';
font-weight: normal;
font-style: italic;
font-size: 16px;
text-align: left;
color: #000000;
padding: 10px;
}


Ustedes podrán agregar complementos en estilos para sus fuentes de Google fonts como de Fonts library con un estilo, o máximo dos estilos en fuentes. Si solo quieren agregar solo el título o el texto son los siguientes códigos y será el mismo paso a paso de Agrega una fuente diferente en tus Entradas:

TÍTULO
/* titulo
----------------------------------------------- */
.titulo {
font-family: 'odstemplikRegular';
font-weight: normal;
font-style: italic;
font-size: 20px;
text-align: center;
color: #000000;
padding: 10px;
}
El siguiente código solo deberán agregarlo en el área de su HTML de su entrada. El html de su entrada lo encontrarán en la pestaña Redactar HTML y solo cambiarán la palabra tu título por el suyo:


<div class="titulo">tu título</div>
TEXTO
/* texto
----------------------------------------------- */
.texto {
font-family: 'odstemplikRegular';
font-weight: normal;
font-style: italic;
font-size: 20px;
text-align: center;
color: #000000;
padding: 10px;
}
El siguiente código solo deberán agregarlo en el área de su HTML de su entrada. El html de su entrada lo encontrarán en la pestaña Redactar HTML y solo cambiarán la palabra tu texto por su texto:


<div class="texto">tu texto</div>



Primero antes de concluir quiero comunicarles que habrá algunos o ligeros cambios en las entregas de la semana o en el calendario de entregas. 

Los días lunes continuarán, pero los días martes será un martes si y otro no para organizar mejor mi día a día en el blog y no estar tan corta de tiempo con las entregas y bueno ya no me enrollo más con el tema y espero que este complemento sea una ayuda extra para agregar diferentes estilos de fuentes a su blog en blogger y si el resultado fue positivo no se olviden en recomendar en sus redes sociales favoritas recuerden un extra siempre viene muy bien. Disfruten de la semana y yo los espero de este lado del blog la próxima semana con dos entregas y cuéntame en los comentarios... ¿Qué te pareció la entrada?..


No hay comentarios.:

Publicar un comentario

Instagram