Cuadros de codigo en blogger.

Añadir cuadros de codigo en blogger es algo facil y ganan mucho en usabilidad tus entradas, cuando quieres compartir algun codigo. Veamos a ver como se hace. Tan solo hay que modificar algo el codigo de la plantilla.

print 'Como puedes ver esto es codigo'
print 'Aqui podriamos poner un ejemplo clasico'
print 'Como puede ser'
print 'Hola Mundo- PERDON POR EXISTIR'

Bien pues para hacer esto es tan sencillo como entrar en:
DISEÑO - EDICION DE HTML en blogger, descarga el codigo de tu plantilla por si la cagas. Despues busca esta cadena: ]]></b:skin>. Puedes usar desde el navegador editar>buscar y copia y pega ]]></b:skin>. Cuando lo encuentres inserta este codigo antes.

pre { 
        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnaDDj2cwaXArGSUpj4mFDFniDQdYuqUtvnOLgoUuViX1FzCi9bINZb81tSwwrRy4Z-4CjtPqARpANB5o3e-Ydauv6Qz5J8gMDinxiP-dEiniGOKJ7rPzN5iWj3z53dM8hZYKqu9dDW3kR/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;

Y ya esta a partir de ahora puedes crear cuadros de codigo en tu entrada en "Edicion HTML" de una forma sencilla. Tan solo tienes que escribir lo siguiente:

<pre><code>Aqui va tu codigo o la biblia en verso tambien puedes empezar a recitar aquello de:
Con cien cañones por banda
no corta el mar si no vuela
un velero bergantin
Bajel pirata me llaman
por su bravura el temido
en todo mar conocido 
del uno al otro con fin....
y como recito a pelo
y mis neuronas no dan pa mas
lo siento te tendras que aguantar</code></pre>

Si deseas modificar algunos parametros para personalizar el cuadro de 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.

Via | http://jc-mouse.blogspot.com/2009/10/cuadro-de-codigo-para-blogger.html

Si te ha servido, Gracias por comentar.