Añadir cuadros de contenido en las entradas del blog

Supongo que a muchos blogueros os pasa como a mi, a menudo tenéis que añadir  información complementaria (código, notas,...) en un artículo y éstas quedan un poco antiestéticas. Por no hablar de cuando ese código es demasiado extenso y convierte nuestras entradas en chorizos de 1000 líneas.

Vamos a ver como se pueden poner esas porciones de código (o lo que os apetezca: notas, fotos, videos,...) dentro de cuadros con un tamaño máximo y sus propios scroll y todo si son necesarios.

Lo primero que haremos será ir a Personalizar, y a Diseño-->Edición HTML y marcamos la casilla de Expandir plantillas de artilugios. Una vez hecho, en el código buscamos la siguiente etiqueta:

]]></b:skin>

Ahora añadimos el siguiente código justo antes:

pre
{
   background:transparent url(#) no-repeat 0 0; /* PARA PONER UNA IMAGEN AL CABECERO DEL CUADRO, PONIÉNDO LA URL DONDE ESTÉ */
   padding-top:24px; /* PARA AJUSTAR EL RELLENO DEL FONDO */
}
pre code
{
   overflow:auto; /* DETEMINA SI ES NECESARIO PONER SCROLL */
   background-color:#fffbe5; /* COLOR DEL FONDO DEL HEX */
   border:1px solid #fff1a3; /* COLOR DEL BORDE DEL HEX */
   color:#7e1f09; /* COLOR DE LA LETRA EN HEX */
   display:block; /* NO TOCAR PARA NADA */
   padding:5px; /* RELLENO DEL CUADRO */
   white-space:pre; /* NO TOCAR PARA NADA */
   text-align:left; /* ALINEACIÓN DE LAS LETRAS */su
   min-height:63px; /* ALTURA MÍNIMA DEL CUADRO */}
/* CUANDO SE PASE EL RATÓN SOBRE EL CUADRO, PUEDE CAMBIAR DE COLOR: */
   code:hover
{
   background-color:#FEFEDD; /* COLOR DEL FONDO EN HEX */
   border:1px solid #ffd511;/* COLOR DEL BORDE EN HEX */
}

Atendiendo a los comentarios que he añadido en el código, los cuadro que aparecerán en nuestra web se puede configurar dándole el aspecto y comportamiento que deseemos.

Por último, cuando queramos poner algún cuadro en una entrada del blog que estemos editando, nos pondremos en Edición de HTML de la entrada y pondremos entre las etiquetas <pre><code> y </code></pre> lo que queramos insertar dentro del cuadro, de la siguiente manera:

<pre><code> PORCIÓN A INTRODUCIR DENTRO DEL CUADRO </code></pre>

Y ya está. Espero os sirva y le saquéis provecho.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS