Cuadros de notas en post de Blogger con efectos de animación

Muchas veces, cuando escribimos un articulo en nuestros sitio y sobretodo, cuando el articulo esta relacionado con dar instrucciones de algo o seguir pasos de instalaciones, nesecitamos cuadros de notas para transmitir un consejo, una advertencia o otro suceso.
En esta ocasión, compartiré un tutorial sobre cómo crear un cuadro de notas interesante (Note Box) para obtener información, sugerencias y advertencias en las publicaciones de Blogger.
El cuadro de notas que compartiré tiene un efecto de animación de icono a la izquierda bastante divertido y llamativo para nuestros lectores, y nuestra idea siempre es captar su atencion.
Estos cuadros de notas tienen 7 opciones de color e iconos que puedes elegir según tu gusto, o incluso puedes cambiarlo tú mismo como desees.

Si estás interesado en instalar un cuadro de notas en una publicación de blogger, siga los pasos a continuación.

Como instalar los iconos Font Awesome en Blogger

Lo primero que debemos hacer antes de proceder con la instalacion de los Cuadros de Notificacion es instalar los iconos que van a usar. Para eso vamos a incorporar en nuestra plantilla blogger de forma permanente el Font Awesome. Para instalar estas librerias debemos hacer lo siguiente:

Lo primero que debemos hacer es entrar al panel de nuestro blog y entrar en Tema > Editar HTML. Una vez dentro del editor de HTML buscamos la etiqueta </head> y justo encima de ella pegamos el siguiente código.

Después de eso, haga clic en Guardar tema.

Ahora si ya estamos listos para proceder a instalar cuadros de notas (Note Box) para poder usarlos cundo escribimos nuestros articulos en Blogger.

Cómo hacer cuadros de notas geniales en publicaciones de Blogger

Primero, vaya a Blogger >> Temas >> Editar HTML.
Luego, pegue este código arriba del código ]]> </ b: skin> o </style>

/* Caja de notas con icono animado */ .notes{ position:relative; border-radius:4px; display:block; font-size:14px; margin:16px 0; padding:12px 24px 12px 60px } .notes:before{ float:left; font-size:30px; font-family:FontAwesome; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; word-wrap:normal; margin-left:-46px; margin-top:3px } .notes1:before{ color:#21a796; content:'\f087'; } .notes1{ background:#cfffe6; color:#565656 } .notes2:before{ color:#f95060; content:'\f088'; } .notes2{ background:#f9bfc5; color:#565656 } .notes3:before{ color:#2387c1; content:'\f06a'; } .notes3{ background:#c8d9e2; color:#565656 } .notes4:before{ color:#1aa687; content:'\f00c'; } .notes4{ background:#6dedd0; color:#565656 } .notes5:before{ color:#f63a50; content:'\f00d'; } .notes5{ background:#fb818f; color:#fff } .notes6:before{ color:#f7871a; content:'\f10d'; } .notes6{ background:#f5b474; color:#fff } .notes7:before{ color:#969696; content:'\f0c1'; } .notes7{ background:#f5f68e; color:#565656 } /* Anamasi Icon*/ .notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{ -webkit-animation:ripple 0.65s linear; -moz-animation:ripple 0.65s linear; -ms-animation:ripple 0.65s linear; -o-animation:ripple 0.65s linear; animation:ripple 0.65s linear } @keyframes ripple{ 100%{ opacity:0; transform:scale(2.5) } }

Después de eso, haga clic en Guardar tema.

Luego, para aplicar en la publicación, cree una nueva entrada / nueva publicación >> y pegue este código en modo de edicion HTML (no Redactar) del post.

Caja de notas versión 1