Enmarcado de texto en Blogger

Hola gente, hoy traigo una manera para citar texto en blogger con apariencia de terminal. Puede ser útil a personas que posean un blog en blogger  y que quieren plasmar comandos.

Básicamente se trata de un código que incrustaremos en el html como por ejemplo:

<p style="border: ridge #020202 4px">    Aquí va lo que quieres enmarcar</p>

En naranja tenemos el color que le damos al borde y en rojo la anchura del borde en píxeles, quedando de esta forma:

Aquí va lo que quieres enmarcar

Ahora mostrare dos ejemplo de enmarcado con apariencia de terminal y su respectivos códigos.

Ejemplo con forma de Terminal Linux:

DesdeLinux  : bash - Terminal                                                                                           □ _ X

sudo apt-get update sudo apt-get upgrade sudo apt-get install manpages-es manpages-es-extra sudo dpkg-reconfigure locales

Código:

<table style="background-color: black; border: ridge #2E2E2E 4px;"><tbody>
<tr><td><span style="background-color: #444444;"><span style="color: red;"><span style="color: black;">&nbsp;</span></span></span><span style="background-color: #444444;"><span style="color: red;"><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DesdeLinux&nbsp; : bash - Terminal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #666666;"> □ _ X</span></span></span></span></td></tr>
<tr> <td><pre><span style="color: lime;">sudo apt-get update
sudo apt-get upgrade
sudo apt-get install manpages-es manpages-es-extra
sudo dpkg-reconfigure locales</span></pre>
</td></tr>
</tbody> </table>

Lo que esta en rojo, lo cambiaremos por el texto que nosotros queramos.

Ejemplo Linea de comandos de Windosw:

DesdeWindosw  : CMD - Linea Comandos                                                                                           □ _ X

sudo apt-get update sudo apt-get upgrade sudo apt-get install manpages-es manpages-es-extra sudo dpkg-reconfigure locales

Código:

<table style="background-color: black; border: ridge #2E2E2E 4px;"><tbody>
<tr><td><span style="background-color: blue;"><span style="color: red;"><span style="color: black;">&nbsp;</span></span><span style="color: red;"><span style="color: black;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: white;">DesdeWindosw&nbsp; : CMD - Linea Comandos</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: white;"><span style="background-color: blue;">□ _ X</span></span></span></span></span></td></tr>
<tr> <td><pre><span style="color: white;">sudo apt-get update
sudo apt-get upgrade
sudo apt-get install manpages-es manpages-es-extra
sudo dpkg-reconfigure locales</span></pre>
</td></tr>
</tbody> </table>

Bueno, mas de lo mismo, lo que esta en rojo es el texto que cambiaremos por el nuestro. De todas maneras siempre tienes la posibilidad de agregar el código en HTML y modificar su texto desde Redactar. Un saludo y espero que sea de ayuda.