Bloque para Notas dentro de una publicación

El siguiente, es un bloque para agregar una nota dentro de una publicación. Este ha sido tomado desde la página de instrucciones de Adobe Photoshop

Este es el ejemplo en HTML. Dentro de esta publicación están incluídos los estilos en una etiqueta <style>

Nota:
Si desea muestrear varias áreas, mantenga pulsada la tecla Mayús para activar el cuentagotas +. Mantenga pulsada la tecla Alt (Windows) u Opción (Mac OS) para activar el cuentagotas –.

Código HTML

HTML

<div class="note parbase">
   <div class="help-note">
      <p>
      <span class="help-note-title">Nota:</span>
      </p><p>Si desea muestrear varias áreas, mantenga pulsada la tecla Mayús para activar el cuentagotas&nbsp;+. Mantenga pulsada la tecla Alt (Windows) u Opción (Mac&nbsp;OS) para activar el cuentagotas&nbsp;–.</p>
      <p></p>
    </div>
</div>

CSS

<style>
.help-note {
    border: 2px solid #707070;
    border-radius: 4px;
    margin: 20px 0;
    padding: 10px 20px;
    color: #292f33;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
    text-align: left;
}
span.help-note-title {
    font-weight: 600;
    color: #2c2c2c;
}
.help-note-title:after {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2CPykJ5hY661BwYxxhVvtrpWB46EviI2RudpX2W8TblOq922HC_klyyH4sQUiVsFbjmFu7PoCPtVRVoft_kvH8OoRtYGivJHmZtzaInL75hw802xAAnez6V5eEuN6DSCBUKh66S_SWM/s1600/descargar.png);
    background-size: 22px; /*Con esto se le da tamaño a la imagen*/
    background-repeat: no-repeat;
    content: " ";
    height: 22px;
    width: 22px;
    float: right;
    padding: 10px;
}
.help-note p {
    font-style: normal !important;
    line-height: 1.5;
}

/*Este estilo no afecta en nada en Blogger*/
.step * {
    margin-right: 0px !important;
}
</style>

***