11

Caja contenedora para codigos html

-voy a explicaros la forma de crear una caja contenedora para poder mostrar nuestros códigos html.
-Podremos modificar a nuestro gusto los siguientes datos:
background, color, margin, padding etc.
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :

-CODIGO:

/* Caja de código */pre {padding-top:22px; /* Relleno - para ajustar Fondo */}pre code {overflow:auto; /* Determina si es necesario agregar barras de Scroll */background-color: #efffdf; /*Color de Fondo en Hex */border:1px solid #999999; /*Color de Borde en Hex */color:#333333; /*Color de letra en Hex */display:block; /* No tocar */padding:8px; /* Relleno del cuadro */white-space:pre; /* No tocar */text-align:left; /*Alineacion del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /*Altura minima del Cuadro */}/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */code:hover {background-color: #CAF99B; /*Color de Fondo en Hex */border:1px solid #0066cc;/*Color de Borde en Hex */le}/*FIN Caja de código */

-Una vez agregado el código a nuestra plantilla guardamos los cambios y listo.
-Si queremos que cada vez que nos interese mostra un código aparezca nuestra caja, lo haremos de la siguiente forma:
-Al inicio de nuestro código pondremos las etiquetas <pre><code>Aquí el Código</code></pre>.
-Si queremos que aparezca automaticamente en nuestra plantilla "posts" accederemos a: Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardaremos los cambios efectuados.
El resultado final seria como el que os muestro en este post, pero con colores distintos.

11 comentarios:

Junnior Isales dijo...

mira tengo una duda hay codigos que me salen.. por ejemplo pongo el codigo de un reproductor y me salto la caja y todo pero me sale el reproductor y lo que queiro qeu solo se vea el codigo.

Daniel dijo...

ya,la caja contenedora solo es para "diferenciar" el código, pero "Blogger" lo sigue transformando a su antojo...lo que debes hacer es el "código que vallas a introducir y tenga: " < o > " estos signos debes ponerlos todos en "Negrita" verás como así para Blogger pasa desapercibido,y puedes ver el código completo...

Junnior Isales dijo...

Fijate que la vdd no etiendo ni papa.. mira el unico problema es sigo todos tus pasos para colocar en codigo en edicion html de platilla y todo .. pero la vdd a la hora de postiar un codigo no me sale el codigo si no que la imagen adentro de la caja.. y asi sucesivamente si meto un codigo de un reproductor me sale el reprodictor adentro de la caja.. porfa tu blog me ah servido mucho y pues no sera mucha molestia que me lo explicaras paso a paso pero en lo que es la insertacion del codigo andentro de la caja para los post.. ;) te lo agradeceria mucho..

Daniel dijo...

Junnior: cuando quieres poner un código ¡y que se vea!,en el "post" debes cada < o > "esos signos" que son obligatorios para formar html (es lo que Google detecta y transforma),así que lo engañamos,"poniéndolo en NEGRITA"

Para que no se transforme html:

-cuando encontremos los signos < o > debemos ponerlos en NEGRITA.

No hay mas es muy fácil y puedes ver que en mi blog puedes copiar los códigos de esa manera.Un saludo,No te puedo decir mas por que "no hay mas",espero lo consigas animo,cuando lo hagas te partirás de risa de lo fácil que es!.

Suso dijo...

Pues según avanza la mañana, más espesillo me siento, conlo bien que habia empezado!!!

Te cuento Daniel: inserto el código en la plantilla, la guardo y la acepta. Correcto.

Para ver si funciona, y debido a un trauma que sufrí hace un par de semanas redactando una entrada sobre cómo modificar el favicon (tuve que insertarlos al final como imágenes jpg, porque blogger se comía todos los códigos en cuanto véia los ><...), voy a probar con el mismo código, que se la tengo jurada!!

Pero el muy cabrrrr me la sigue jugando, por lo que pienso que estoy haciendo mal algo. Te pregunto: ¿las etiquetas pre-code-Aquí el Código-code-/pre (elimino a propósito los corchetes porque si no, no me permiten publicar ni el comentario...) las incorporo al post en "redactar" o en "edición HTML"? He probado de ambas formas y res de res (nada de nada), al dar "vista previa" sale en blanco.

Porque el fin último de la caja es evitar que blogger se coma el código incluído en una entrada (lo que te he comentado que me pasaba a mí el otro día), verdad?

Ah!! También he probado a modificar la plantilla de entrada y como que no (por cierto, los códigos se quedan independientes al principio del post, y el texto a partir del siguiente renglón, como si no fuera con ellos...

Pues como dijo Lennon: HELP!! Que soy algo zoquete (y yo que me creía ya medio peón de segunda...). Ah!!! Que no se me olvide, te insisto con mi navegador, Mozilla, porque sospecho que Explorer y Firefox arrojan resultados distintos a las mismas modificaciones (por ejemplo, la del favicon...)

Gracias de antemano, Daniel

Daniel dijo...

Suso los últimos paso debes seguirlos al pié de la letra,si no pones las etiquetas pre-code...code-pre...y entre ellas el código,en cada post que escribas y quieras ponerlo,no te va a funcionar,respecto a Mozilla,yo ni lo uso ni lo usaré nunca.

A otra de tus preguntas,si soy de Murcia,y debido a mi reducido tiempo,intento postear algo cada vez que puedo a veces tardo dos semanas en encontrar hueco,por eso si ves cosas útiles,cogelas.

Me gustaría estar por aquí mas a menudo,pero mi trabajo y vida personal me impide estar todos los días frente al PC.y me es imposible estar a "todas".

Algunos errores como lo del favicón efectivamente de Mozilla a Explorer cambia,pero el los dos sale!,quizás con Explorer tarde mas pero si lo as hecho bien,en "formato ico" seguro que funciona.Un saludo.

por cierto,me dices que cometo faltas ortográficos y tu pones en este comentario estas cosas: "conlo,habia,véia" .....que debería ser "con lo" "había" y "veía"

otra cosa es que según veo parece que o haces o quieres hacer un blog como el mio de "usar cajas para códigos","enseñar a poner favicones",te advierto que "no te puedo explicar como se hace para que tu se lo expliques a otro sin saber".Una cosa es que lo apliques en un blog,y otra muy distinta es que me satures a comentarios "6 de golpe y muy largos" para robarme los post.

Si no sabes dar clases ¡no te metas a profesor! paisano.

Daniel dijo...

Ey Suso:

7 comentarios en 1 día y cada uno de ellos de mas de 20 renglones,el séptimo muestra que te falta un tornillo ¡gordo!,ya lo sabia y por eso te corté el rollo,yo no escribo para que me invadan,ve a darle la sinfonía matinal a otro.

Ve a que te lo miren y Hola y adiós.

Sumyta dijo...

Muxas Gracias!!!! me salió perfecT!!!!...
Me Apunto a Tu Blog =D...

como puedes crear una caja de comenarios en donde te dejen su mail, su nombre y el comentario

Anónimo dijo...

gracias!!! todo estaba super facil,pero como le cambió el color y tamaño a la cajita?? :( ,espero q cuando puedas me respondas =D

Guido dijo...

Como haz hecho el cursor de bob esponja?

Gracias por comentar.

El comentario se publicará en breve.