Cuadro de codigo para blogger

Si quieres añadir "cuadros de codigo" en blogger, necesitas modificar un poco el codigo de tu plantilla.

Este es un cuadro de codigo
Aqui es donde puede colocar codigo HTML que no se ejecutara como este:
<h1>Hola mundo</h1>

Lo primero que debes hacer es entrar a DISEÑO - EDICION DE HTML en blogger, copia el codigo de tu plantilla y pegalo en un editor de texto como notepad2, ahora busca esta cadena: ]]></b:skin> , en mi caso lo encontre en la linea 726.

Una ves que lo encuentres en tu plantilla, debes pegar este codigo:

pre { 
        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjOu9zQH50Drq8T5S0mhI-LNaNMNwn6pn2WSUynpuAdscJaw_gaM8zUC8qrUQvUmziyS4DH8RPV3vDQQb5x0xzp2OfuEytUqYCHk7CLwT-LKr1LnXezN6WfF3soRrJpnjElH922-f544L/s1600/code-blog.jpg) no-repeat 0 0;  
        padding-top:24px; 
} 
pre code {  
        overflow:auto;  
        background-color:#CFCFCF;  
        border:1px solid #3D3625;  
        color:#7e1f09;  
        display:block;  
        padding:5px;  
        white-space:pre;  
        text-align:left;  
        min-height:63px;  
} 
code:hover { 
        background-color:#E4F0F2;
        border:1px solid #CFCFCF;
}

debes tener algo asi:

Si deseas modificar el codigo, puedes cambiar estos valores por los que tu desees:

• En URL, puedes colocar la direcciona de la imagen que quieras tener como barra de titulo.
• Overflow: coloca automaicamente las barrras de scroll si las necesita.
• background-color: el color de fondo en hexadecimal.
• border: el grosor de borde en pixeles y el color del mismo en hexdecimal.
• color: el color del al letra en hexadecimal
  
• text-align: la alineacion del texto.

Ya tienes creada tu "cuadro de codigo".

Para poder utilizar este cuadro de codigo, debes utilizar las etiquetas:

<pre><code>aqui va tu codigo</code></pre>