Escribiendo código en un Blog . Parte 2

Lo siguiente es, una modificación que se le debe hacer a la plantilla html de nuestro Blog, esto con el fin de que el código que estemos colocando pueda verse con un mejor formato.
En el primer post sobre escribir el código en el blog, se podía colocar el texto de forma tal que se diferenciara y se notara lo que debía escribirse. El detalle esta, en que el formato solo iba a afectar al texto hasta donde este llegara, o del largo que fuera.

Además, otro aspecto negativo es que visualmente se ve feo si son varias lineas, debido a que aunque le coloquemos un fondo al código, este variara de tamaño porque dependerá del largo de la instrucción que hayamos escrito.
Entonces para ello la solución sería que el código estuviese insertado en una celda de una tabla, sin embargo es sabido que agregar tablas es una técnica que poco a poco se esta dejando de usar debido a que aumenta el tiempo de carga de la pagina web, y esto debido a que son muchas sentencias o lineas de códigos html que deberemos cargar para cada celda donde haya código, ademas de la configuración de la tabla. Ahora, y si en el blog tenemos varios post que incluyen ejemplos de códigos? pues esto generará un pagina demasiado pesada muy cargada que tardara mucho tiempo para que el browser la termine mostrando, entonces cual es la solución???
Con el código CSS resolvemos darle un buen formato al texto, usando las etiquetas <div> y definiendo una regla, nos ahorraremos varias lineas de código, y la pagina del blog seguirá cargándose con buenos tiempos.
Lo primero es ir a editar la plantilla html del blog, esta la encontramos en la lengüeta Diseño , ahí veremos la opción de edición html, con el browser buscamos la etiqueta #footer justo después del cierre de la regla "}" aquí agregaremos el siguiente código:

.nombreregla {
border:1px solid #0033CC;
text-align:left;
font-family:Verdana;
margin:10px 20px 10px 20px;
padding:10px 10px 10px 10px;
color:#0033CC;
background-color: #C8C8E6;
}


Donde dice .nombreregla pueden cambiarlo como quieran nombrar su regla, posteriormente cuando la vayan a llamar con la etiqueta <div class="nombreregla">
La opción border, es para indicar el grosor que tendrá el recuadro , ademas indicarlo puede escoger si va a ser solido (como en este caso) o punteado, y por ultimo el color que este tendrá.
Las otras opciones son obvias de entender, aunque la ultima "background-color" hay que colocarla del mismo color que la opción "style" de la etiqueta <span> o a menos que no le pongamos nada.
Bueno ahora que entendimos las opciones, podemos hacer una vista previa de la plantilla , para ver que las cosas están bien y no se ha dañado nada, si no nos indica ningún error, guardamos la plantilla y el siguiente paso es al momento de crear cualquier entrada en el blog, aquí además de las etiquetas que ya veníamos colocando para escribir códigos, le agregaremos ANTES de la etiqueta <code>:

<div clas="nombreregla">


Recordemos nuevamente que donde indica class="nombreregla" lo sustituimos por el nombre de la regla que le pusimos en la plantilla html.
Finalmente cerramos el código con la etiqueta </div> . Colocar estas etiquetas es mucho más practico si lo hacemos creando una entrada para el blog en el modo "Edición de Html" y no el modo sencillo de "Redactar".
Bueno espero les funcione.