Bootstrap Examples. Simple card alerts for Blogger.

Este tipo de mensajes se utilizan normalmente para proporcionar al usuario información contextual sobre el resultado de sus acciones.
Emplear notificaciones es la forma más directa de informar al usuario acerca de mensajes, errores o cualquier otro tipo de evento. Ahora puedes implementar fácilmente esta característica a tu sitio web mediante este tutorial.
Para esto debemos hacer unas pequeñas modificacciones en nuestra plantilla Bloggr ya que Blogger Blogspot no lleva estas funcciones por defecto en sus plantillas. Por lo tanto bebemos agregar manualmente en nuestra plantilla los elementos de Java Script ,CSS y al final en nuestro post el HTML para visualizar las notificaciones en nuestras publicaciones.

Nota: - Hagan respaldo de su plantilla antes estas operaciones!

El Primer paso es agregar el Java Script a nuestra plantilla.

1. Vaya a su Panel de control de Blogger >> Plantilla >> Editar HTML
2. Ahora haga clic en cualquier lugar en HTML y Presione Ctrl + F
3. Y buscar a //]]>
4. Ahora pegue el siguiente código arriba de //]]>

JS

<
link href = "//maxcdn.bootstrapcdn.com/bootstrap/
             3.3.0/css/bootstrap.min.css"
      rel = "stylesheet"
      id = "bootstrap-css" >
<
script src = "//maxcdn.bootstrapcdn.com/bootstrap/
              3.3.0/js/bootstrap.min.js" > < /script> <
  script src = "//code.jquery.com/jquery-1.11.1.min.js" > < /script>

El Segundo paso es agregar el CSS a nuestra plantilla.

1. Vaya a su Panel de control de Blogger >> Plantilla >> Editar HTML
2. Ahora haga clic en cualquier lugar en HTML y Presione Ctrl + F
3. Y buscar a ]]></b:skin>
4. Ahora pegue el siguiente código arriba de ]]></b:skin>

CSS

.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-sm {
    padding: 10px;
    font-size: 80%;
}
.notice-lg {
    padding: 35px;
    font-size: large;
}
.notice-success {
    border-color: #80D651;
}
.notice-success>strong {
    color: #80D651;
}
.notice-info {
    border-color: #45ABCD;
}
.notice-info>strong {
    color: #45ABCD;
}
.notice-warning {
    border-color: #FEAF20;
}
.notice-warning>strong {
    color: #FEAF20;
}
.notice-danger {
    border-color: #d73814;
}
.notice-danger>strong {
    color: #d73814;
}

HTML

<div class="container">
    <div class="notice notice-success">
        <strong>Notice</strong> notice-success
    </div>
    <div class="notice notice-danger">
        <strong>Notice</strong> notice-danger
    </div>
    <div class="notice notice-info">
        <strong>Notice</strong> notice-info
    </div>
    <div class="notice notice-warning">
        <strong>Notice</strong> notice-warning
    </div>
    <div class="notice notice-lg">
        <strong>Big notice</strong> notice-lg
    </div>
    <div class="notice notice-sm">
        <strong>Small notice</strong> notice-sm
    </div>
</div>

Notice notice-success

Notice notice-danger

Notice notice-info

Notice notice-warning

Big notice notice-lg

Small notice notice-sm

Y las pueden usar por separado dependiendo de la situacion y el color.

Notice notice-success

Notice notice-danger

Notice notice-info

Notice notice-warning

Big notice notice-lg

Small notice notice-sm