tutorial_practico_sencillo_para_tus_textos

Hola, hola como siempre espero que se encuentren muy bien en la entrega de esta semana será para un tutorial muy sencillo y práctico para resaltar un poco el texto o el título que quieran que se note más en una entrada en un blog.



TUTORIAL PRÁCTICO & SENCILLO PARA TUS TEXTOS


Antes de comenzar este sencillo tutorial si no lo entienden o no lo comprenden recomiendo explorar las siguientes entradas o si ya conocen los pasos los podrán omitir y ir directamente a los códigos:



La base principal de este tutorial son las tres entregas que se han publicado con este tema de agregar diferentes fuentes de Google Fonts y Fonts Lybrary. El primer tutorial son Dos Trucos Sencillos Para Tu Blog y es donde se explica el paso a paso para agregar las fuentes de Google fuentes a blogger, el segundo tutorial es para Agregar una fuentes distinta en tus entradas utilizando el código que lo encontraras en esta entrega y la tercer entrega es un Complemento para tus fuentes para tu blog y este complemento es Fonts library que al igual que Google fonts te permite agregar y extender las fuentes que quieran agregar a su blog y aquí en esta tercer entrega también encontrarán la forma de aplicarlo solo al texto como al título.



Y en este extra agregaré un tutorial muy sencillo y práctico para agregar iconos awesome a su blog este paso a paso lo encontrarán en la entrega Diferentes botones para descargar y se muestran todos los tipos de botones que han aplicado en este blog



Para entrar de lleno al tutorial los códigos son los siguientes y para quienes siguen al blog estos códigos los conocerán. El primer código lo agregan en su CSS de su blog y el segundo código lo agregan en el Html de su entrada en blogger y para ver la explicación de los dos códigos solo oprimen Ver Explicación:



El código CSS
.titulo-2 {
font-family: 'Limelight', cursiva;
font-size: 26px;
text-align: center;
color: #ffffff;
background-color: #000000;
padding: 10px 50px 10px;
display: inline-block;
margin: 20px
}


El código del html de la entrada
<center>
<div class="titulo-2">
TU TEXTO AQUI</div>
</center>







UN EJEMPLO DE Título o texto


Con este segundo código solo lo que cambiaría son los iconos awesome que se agregan y el proceso es el mismo el primer código es para agregar en el CSS de su blog en blogger y el segundo es para el HTML de su entrada en blogger y para ver la explicación de los dos códigos solo oprimen Ver Explicación:



El código CSS
.titulo-2 {
font-family: 'Limelight', cursiva;
font-size: 26px;
text-align: center;
color: #ffffff;
background-color: #000000;
padding: 10px 50px 10px;
display: inline-block;
margin: 20px
}
.fa-paper-plane {
font-size: 22px;
color: #000000;
padding: 3px;
}


El código del html de la entrada
<center>
<div class="titulo-2">
<i class="fa fa-paper-plane" aria-hidden="true"></i> TU TEXTO AQUI</div>
</center>





UN EJEMPLO DE Título o texto


Si quieren agregar el .titulo .titulo-2 en el código junto quedaría así:



/* titulo
----------------------------------------------- */
.titulo {
font-family: 'Limelight', cursiva;
font-size: 26px;
text-align: center;
color: #000000;
padding: 20px;
}
.titulo-2 {
font-family: 'Limelight', cursiva;
font-size: 26px;
text-align: center;
color: #ffffff;
background-color: #000000;
padding: 10px 50px 10px;
display: inline-block;
margin: 20px
}
.fa-paper-plane {
font-size: 22px;
color: #000000;
padding: 3px;
}


Y los códigos juntos para el HTML de su entrada en blogger sería:



El código del html de la entrada
<div class="titulo">
<i class="fa fa-paper-plane" aria-hidden="true"></i>TU TEXTO AQUÍ</div>

<center>
<div class="titulo-2">
<i class="fa fa-paper-plane" aria-hidden="true"></i>TU TEXTO AQUÍ</div>
</center>

En resultados serían con iconos awesome:


TEXTO DEL .titulo
TEXTO DEL .titulo-2

Si quieren agregar un enlace al código titulo-2 solo tienen que copiar el siguiente código y agregar su enlace donde dice: aquí tu url dentro de las comillas:


El código del html de la entrada


<center>
<div class="titulo-2">
<a href="aqui tu url" rel="nofollow" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i>TU TEXTO AQUÍ</a></div>
</center>


Con este práctico y sencillo tutorial podrán combinar sus textos o títulos con diferentes fuentes en sus entradas en blogger y podrán agregar más títulos o textos que ustedes prefieran. Siempre recomendaré agregar una fuente o un máximo dos fuentes para resaltar cualquier texto o título.



Con este tutorial y explorando los otros tutoriales podrán agregar diferentes fuentes en una entrada para su blog en blogger y no me enrollo más con el tema. Si el resultado fue un acierto 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 el próximo lunes o con alguna entrega improvisada en la semana. Recuerden ser suscriptores para recibir todo el contenido del blog. Cuéntame en los comentarios...¿Qué te pareció la entrada?..