Cómo Agregar Cajas de Alertas y Notas Destacadas en Blogger (widget)

Resaltar avisos importantes, advertencias o enlaces de descarga dentro de tus artículos aumenta el tiempo de lectura y la retención del usuario. En esta guía paso a paso te mostramos cómo agregar cajas de alertas estilizadas listas para usarse en cualquier gadget o publicación.

Tipos de Cajas Incluidas

• Nota Informativa (Azul): Ideal para recomendaciones o recordatorios generales.
• Advertencia (Amarilla): Perfecta para avisos importantes o cambios de configuración.
• Éxito / Confirmación (Verde): Diseñada para confirmar descargas o indicar que algo está verificado.

Cómo Añadirlas a Blogger

1. Dirígete a tu panel de Blogger.
2. Para usarlas globalmente, agrégalas en un gadget de tipo HTML/JavaScript en la barra lateral o en la pestaña Diseño.
3. También puedes copiar el código directamente al redactar una entrada seleccionando la vista HTML.

Código HTML y CSS de las Cajas de Alertas

<!-- Cajas de Notificacion y Alerta -->
<style>
  .alert-box {
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  .alert-info {
    background-color: #e8f4fd;
    color: #1d6f8a;
    border-left: 5px solid #209cee;
  }
  .alert-warning {
    background-color: #fffbeb;
    color: #946c00;
    border-left: 5px solid #ffdd57;
  }
  .alert-success {
    background-color: #effaf5;
    color: #257953;
    border-left: 5px solid #48c78e;
  }
</style>

<!-- Ejemplo de Nota Informativa -->
<div class="alert-box alert-info">
  <strong>&iCmpl; Nota:</strong> Recuerda hacer una copia de seguridad de tu plantilla antes de modificar cualquier código HTML.
</div>

<!-- Ejemplo de Advertencia -->
<div class="alert-box alert-warning">
  <strong>&AExcl; Atención:</strong> Este script requiere que tu plantilla sea compatible con HTML5.
</div>

<!-- Ejemplo de Exito -->
<div class="alert-box alert-success">
  <strong>&check; Verificado:</strong> El enlace de descarga ha sido actualizado y no contiene publicidad molesta.
</div>