Añadir caja de código HTML personalizada para los códigos del blog

Mira como añadir una caja de código HTML personalizada para los códigos en un blog...

¡Hola!, si tienes un blog de diseño o programacion HTML, y quieres realizar un tutorial para tus visitantes, y brindarles el código, debes tener una caja HTML que cubra el código, Todo para darle personalidad al blog.


Este era uno de mis problemas cuando empeze, no sabia como diablos poner una caja HTMl, y ahora que lo encontré lo quiero compartir con los que tienen la misma duda.


Sin preámbulos, para colocar una caja de código html personalizada en una entrada del blog, lo primero que deberás hacer es buscar la etiqueta ]]></b:skin>, y justo antes añadimos lo siguiente:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;

background : #f9f9f9 url(https://lh4.googleusercontent.com/-uvKZfExsTcQ/T_12WhZk18I/AAAAAAAAARg/BVBj7LuwwMo/s125/codigo.png) no-repeat right bottom;

border-top : 1px solid #eeeeee; ***borde de arriba de la caja**

border-right : 2px solid #cccccc; **Borde derecho de la caja**

border-bottom : 2px solid #cccccc; **Boder de abajo de la pagina**

border-left : 1px solid #eeeeee; *Borde izquierdo de la caja html**

}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif; **fuente de la letra de la caja**
color : #333333; ** color del texto dentro de la caja**
font-weight : normal; **Tipo de texto**
margin : 0;
padding : 0;
}

• Ahora deberás dirigirte a una nueva entrada, ubicate en la pestaña Edicion de HTML, y allí pega el siguiente codigo:

<div class="codeview">
Aquí añadimos el contenido de la caja.
</div>

• ¡AHORA A PERSONALIZARLA!

Para darle un toque mas personal deberás cambiar la URL de la imagen, si no quieres url y solo quieres un color de fondo, entonces borra la parte del codigo que dice :

url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom. 

Así quedara  solo la etiqueta :

background : #f9f9f9

IMPORTANTE: Para ingresar el código en la entrada se debe hacer por EDICIÓN DE HTML, pero a la hora de insertar el texto deberás hacerlo por REDACTAR. ;)
¡LISTO!