Alertas en texto

Para poner una alerta en un parrafo, para que este se resalte, tenemos que hacer el siguiente:

hay que notar que esto te puede servir tanto para Blogger como para WordPress

Lo primero es agregar los estilos de los alertas que se hace de la seguinte forma:

En Blogger debes irte a Tema ==> Editar HTML con CTRL + F y vas a buscar ]]></b:skin> arriba de este, pegas lo siguiente:

Pegas el siguiente codigo:

• .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%}}

---

...

Font Awesome

Para que se puedan ver los iconos vamos a necesitar de Font Awesome (CDN)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

Mostrar notificaciones en las entradas del blog

Cuando necesites poner algún alerta en tu entrada lo que falta hacer es ir a vista editar en html y colocar algún de estos códigos que vienen a la continuación:

<div class="alerta-gris">
Mensaje por defecto - gris
</div>
<div class="alerta-verde">
Mensaje por defecto gris
</div>
<div class="alerta-azul">
Mensaje por defecto - gris
</div>
<div class="alerta-roja">
Mensaje por defecto - gris
</div>
<div class="alerta-amarilla">
Mensaje por defecto - gris
</div>
<div class="alerta-oscura">
Mensaje por defecto - gris
</div>

Nota:

Para finalizar, puedes observar en el código que las clases <div class="alerta roja"Mi mensaje </div> va aparecer la mensaje en rojo.

Observacion:

Te vas a quedar con 6 mensajes, pero tu puedes personalizar muchos mas con el código css y html de la página.

• Alerta Gris: Úsalo para lo que quieras.


• Alerta azul: Úsalo para lo que quieras.


• Alerta verde: Úsalo para lo que quieras.


• Alerta roja: Úsalo para lo que quieras.


• Alerta amarilla: Úsalo para lo que quieras.


• Alerta oscura: Úsalo para lo que quieras.

---

Ir al indice

---