Si deseas resaltar una línea o párrafo, y no te basta con subrayarlo con negrita, entonces te recomiendo que apliques unas notificaciones/ mensajes de alertas para las entradas del blog, esto te puede servir tanto para Blogger como para WordPress.
¡Hola! Soy Gabriela y bienvenido a Peengler.com. En esta ocasión te quiero compartir estas notificaciones que se adaptan perfectamente a cualquier dispositivo y que puedes usarlos en cualquier momento.
Sin más que decir ¡Empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Primero vamos agregar los estilos para que los mensajes puedan verse bonitos. Si usas Blogger debes irte a Tema > Editar HTML con CTRL + F y vas a buscar ]]></b:skin>arriba de este, pegas lo siguiente:
.alerta{width:95%;margin:10px auto;padding:12px;position:relative;border-radius:5px;display:flex;align-items:center;font-size:18px}
.alerta.amarilla:before,.alerta.azul:before,.alerta.gris:before,.alerta.oscura:before,.alerta.roja:before,.alerta.verde:before{font-family:'Font Awesome 5 Free';font-weight:900;opacity:.5;font-size:22px;margin-right:10px}
.alerta.gris{background-color:#ebebeb;border-left:5px solid #6c6c6c}
.alerta.gris:before{border-color:#6c6c6c;color:#6c6c6c}
.alerta.verde{background-color:#a8f0c6;border-left:5px solid #178344}
.alerta.verde:before{content:"\f00c";border-color:#178344;color:#178344}
.alerta.azul{background-color:#a3def7;border-left:5px solid #0c798f}
.alerta.azul:before{content:"\f129";border-color:#0c798f;color:#0c798f}
.alerta.roja{background-color:#f7a7a3;border-left:5px solid #8f130c}
.alerta.roja:before{content:"\f00d";border-color:#8f130c;color:#8f130c}
.alerta.amarilla{background-color:#ffd48a;border-left:5px solid #8a5700}
.alerta.amarilla:before{content:"\f071";border-color:#8a5700;color:#8a5700}
.alerta.oscura{background-color:#363636;border-left:5px solid #000;color:#ececec}
.alerta.oscura:before{content:"\f075";border-color:#000;color:#000}
@media screen and (max-width:992px){.alerta{width:90%}}
También vas necesitar Font Awesome para que se puedan ver los iconos, para eso aplicas después/dentro de la etiqueta <head> lo siguiente
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
Y guardas los cambios.
Ahora solo nos falta mostrar los mensajes de alertas en las entradas del blog ¿Cómo lo puedo hacer? Pues agregando en vista HTML algunos de estos códigos:
<div class="alerta gris">
Mensaje por defecto - gris
</div>
<div class="alerta verde">
Mensaje por defecto - verde
</div>
<div class="alerta azul">
Mensaje por defecto - azul
</div>
<div class="alerta roja">
Mensaje por defecto - rojo
</div>
<div class="alerta amarilla">
Mensaje por defecto - amarillo
</div>
<div class="alerta oscura">
Mensaje por defecto - oscuro
</div>
Como puedes ver con solo agregar <div class=”alerta azul”> mi mensaje </div> es suficiente para que aparezca la notificación de color azul. En pocas palabras con que apliques class=”alerta el-color” ya funcionara el mensaje.
Recuerda que posees 6 tipos de mensajes:
El icono que se muestra lo puedes modificar en el CSS. Si usas Blogger debes irte a Tema > Editar HTML con CTRL + F vas a buscar ]]></b:skin> y arriba de este debería estar el código que aplicamos anteriormente.
Por ejemplo, el mensaje azul usa, content:”\f129” con que modifiques lo que está dentro de las comillas y aplicar por el código que aparece en el Font Awesome, este se cambiara.
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"