➡️ Como poner la primera letra de mis entradas de BLOGGER ESTILO CAPITAl ?

como agrandar la primera letra de un articulo en blogger

Hasta la fecha existen distintas formas de poner la primera letra de nuestras entradas estilo capital, es más esta también puede ser aplicada para los títulos del blog, para los bloques entrecomillas y hasta para los comentarios de los usuarios. Es por eso que este artículo quiero enseñarte 2 maneras de poder tener esta función en tu blogger de una manera muy sencilla y rápida. No necesitarás saber de programación ni nada por el estilo para aplicarlo, así que a la marcha.

Añadir letra estilo capital en artículos blogger

Este paso o primer truco es muy sencillo de aplicar tan solo es agregar un Pseudo - elemento Firs-letter ⚡ lo cual es lo que hará que la primera letra de nuestras entradas se ponga al estilo Capital.

 

Para esto tendríamos que irnos a Diseño luego a Edición de HTML y antes de la línea de código ? ]]></b:skin> ?, le anexamos el código siguiente:

.post-body:first-letter { font-size: 40px;

color: #0B243B;
padding-right: 2px;
}

Ya de esa forma tendríamos nuestras entradas con la primera letra capital, pero también podrías aplicarles otros atributos de códigos como en la fuente, el grosor, entre otros aspectos.

Algunos de esos atributos en línea de código son los siguientes;

font-weight: bold; /* letra en negrita */
font-family: Arial; /* tipo de letra */
font-style: italic; /* letra cursiva */

Ahora bien si esto mismo quieres aplicarlo para los comentarios tan solo es irte a la línea de código siguiente, seleccionarla, copiarla y pegarla debajo o arriba del código que te mencione anteriormente:

.comment-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

En caso dado te gustaría aplicarlo en tus títulos de entrada, copia el siguiente código:

.post h3 a:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Y por último si lo quieres aplicar en los bloques entrecomillas aplica la siguiente linea:

.post-body blockquote:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Es de importancia mencionar los siguientes puntos:

1. Este método funciona para los distintos navegadores.

2. Si en dicha letra hay una imagen antes, esta no funcionaria.

3. Si la letra que quieres que se muestre como capital, tiene un signo esta se vería afectada.

Poner la primera letra grande en un artículo

Ya habiéndote enseñado la primera parte de este sencillo truco, no estaría de más mostrarte un segundo método que al igual que el otro es muy fácil de aplicarlo en tus entradas de blogger.

Este método es muy común en los periódicos, revistas online o físicas, así que no estaría mal aplicarla en nuestro blogger en caso de que te guste este efecto. Entonces para obtenerlo tendríamos que irnos al apartado de Plantilla, luego a Edición de HTML y pegar el código que te voy a mostrar a continuación antes de la línea ? ]]></b:skin> ?.

.letrag {
float:left;
color: #fe6700;
font-size:100px;
font-family:none;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

Le damos en guardar y listo, ahora si quieres aplicar este efecto de una manera más rápida y no te toque ponerla cada vez que vayas a redactar un post te invito a que te vayas a Configuración luego a Entradas y Comentarios y por último a plantilla de entradas y pegar la siguiente línea:

<span class="letrag">A</span>

Es de importancia saber lo siguiente:

1. La letra ? A ? deberás remplazarla por la que quieras que aparezca primero en tú artículo

2. En el apartado de color, podrás elegir por él tu preferencia

3. En Font-Size; puedes sustituir el tamaño de la letra

4. Padding: en este apartado puedes hacerle un cambio en lo relacionado con el espacio de la letra capital con la del resto.

Listo chicos esto sería todo hasta aquí, ya ven lo fácil que es aplicar estos dos métodos en su blog de una manera muy sencilla, ahora todo está en disposición tuya escoger el método con el que te sientas más cómodo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad