Cuadro para mostrar código en posts de Blogger

Ya que Blogger no tiene ninguna opción implementada para poder poner un cuadro para insertar código pues podemos crearlo nosotros mismos editando el HTML de nuestra plantilla.
Nos dirigimos a Plantilla → Edición de HTML y copiamos este código justo antes de lo resaltado en rojo.

pre {
  background: 0;
  padding-top: 0;
}

pre code {        
  overflow: auto;        
  background-color: #e0e2ff;       
  border: 1px solid #6f79ff;
  color: #1f5500;     
  display: block;    
  padding: 5px;   
  white-space: pre;        
  text-align: left;        
  min-height: 63px;
}

code:hover {        
  background-color: #eaecff;  
  border: 1px solid #0011ff;
}

]]></b:skin>

Una vez que ya hayamos hecho esto, ya solo tenemos que añadir el codigo este cuando queramos escribir un cuadro de código.

<pre><code>AQUÍ VA EL CÓDIGO</code></pre>