Cómo publicar códigos en un post sin que afecte al blog

Para poder compartir trucos y scripts hay que aprender cómo pulicar códigos en los posts para que, primeramente, no afecte a la estructura del propio blog, y para que el código HTML en sí aparezca como es y no lo que se pretende construir. Es muy fácil hacerlo y, además, podemos editar el estilo para que se muestre bonito; todo en tres sencillos pasos.

Siempre bajo la premisa de que estampos escribiendo el post con la opción HTML, seguimos estos pasos:

1. Convertir un código en un texto plano. Eso significa que los símbolos y carácteres son transformados en sus códigos correspondientes. Se podría hacer a mano, pero para mi sería un lío, así que te propongo que uses una de estas páginas que convierten los códigos en un sólo clic: Blogcrowds y Nosetup.

2. Copiar y pegar el código convertido en texto plano entre <code>Aquí tu código HTML convertido en texto plano</code>, de esta manera estás diciendo que lo que hay entre <code> y </code> se muestre automáticamente cómo código.

3. Ahora toca añadirle estilo a la caja de los códigos mediante CSS. Vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y pegamos lo siguiente:

code{
display:block;
margin: 10px; /*márgenes exteriores de la caja del código*/
padding: 5px; /*márgenes interiores de la caja del código*/
color:#444; /*color del texto*/
font-family: courier new; /*tipografía del texto*/
font-size: 11px; /*tamaño del texto*>
background: #eee; /*color del fondo de la caja del código*/
border: 1px solid #444; /*borde de la caja del código, si no lo quieres borra esta línia*/
}

De este modo los códigos aparecerán en recuadros diferenciadas como en este blog. ¡Cambia lo que quieras para estilizarlo a tu manera!