Alertas en texto

Jorge Catalao septiembre 27, 2022

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

...
Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias