Bonitos Mensajes de Alertas para las Entradas del Blog con Iconos

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

Mensajes de alertas para las entradas del blog con Font Awesome

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.

Mostrar notificaciones en las entradas del blog

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:

Alerta Gris: Úsalo para lo que quieras.
Mensaje Azul: Para informar.
Notificación verde: Algo que está bien o correcto.
Alerta Roja: Para algún error o problema.
Notificación Amarilla: En advertencias.
Mensaje Oscuro: Para lo que quieras.

Como cambiar el icono de las notificaciones

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.

Me interesa

¿Te gusto el post?

¡Compártelo!