Añadir 'Notas', 'Warnings', etc... con icono (I)

Esto ya es para 'nota'. El otro dia, viendo un Blog, me gustó cómo aparecían las 'acotaciones' al margen. Era así:

y me puse a investigar cómo hacerlo, porque en ese Blog lo hacía invocando una 'class', ya sabes, con
<div class="nombre_de_la_class">... ... </div>
y claro, 'las tripas' de esa class estaban en su blog, y no se veían.
Así que, como digo, empecé a probar cosas.
Y descubrí que es muy sencillo de hacer: basta tener, en primer lugar, las imágenes (los iconos) que quieras poner, y a un tamaño apropiado.
Este tamaño apropiado puede ser del orden de 20x20 a 24x24px.
Entonces, te basta, en primer lugar, elegir 'Insertar imagen', insertas el icono apetecido y pones la imagen con alineación a la izquierda, para que 'flote' el texto a su derecha.

Entonces añades el texto, y quedaría una cosa como esta:

Esta es una imagen de 23x23px, alineada a la izquierda.
Al flotar el texto, puedo añadir a su derecha el texto que quiera.

Pero hay que tener en cuenta una cosa: Que si escribo muchas líneas llega un momento en que se sobrepasa en margen, como se ve aquí. (esta imagen es de 24x21 y, como la anterior, solo da margen para 3 líneas.
Lo que si conviene es ver cual es el código HTML empleado (que Blogger ha introducido automáticamente). Y, por ejemplo, para la primera (INFO) es este:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbaY0xb3DRFvOc0UFFDY9QlEye0dqPwgtx1-iluoQBHTNWWZDHNWCQ4Cd3hOG0gDhhL4XMEfGnb-0QavV0VQbDfHgFpRlreqtftI0hSk8-EUtCXvAkhtdgy3SpjdK89CAA9M7t8NNhG9F/s1600/info1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbaY0xb3DRFvOc0UFFDY9QlEye0dqPwgtx1-iluoQBHTNWWZDHNWCQ4Cd3hOG0gDhhL4XMEfGnb-0QavV0VQbDfHgFpRlreqtftI0hSk8-EUtCXvAkhtdgy3SpjdK89CAA9M7t8NNhG9F/s1600/info1.png" /></a></div>
(esta imagen del 'clipboard' es de 28x31px y ya se ve un poco grande ¿verdad?)

Así que...

Visto el código, si pongo, en la imagen, en vez de margin-botton=1em (que es lo que se pone por defecto), por ejemplo margin-bottom=3em, que es lo que hago aquí, puedo añadir más líneas, y se mantiene el margen.
Esta icono de la bombillita es de 24x24px y, como ves, con margin-bottom=4em tengo para 6 líneas.
Y con esto, si guardo en un pequeño archivo de texto las rutas de los iconos que me interese tener archivados, me será sencillo crear estas notas marginales... 'con icono'.

---

Imprimir el artículo/crear PDF
Volver al Indice del Blog

---