Existen muchas formas de colocar códigos HTML en las entradas, desde las más simples hasta las más complejas, la más sencilla de todas es utilizando el tag HTML de un área de texto (TextArea).
Esto es lo que normalmente se utiliza debido a lo simple y práctico que resulta al aplicarlo en nuestras entradas. Por ejemplo quiero colocar una línea de código en HTML sin que me afecte al resto de la entrada, pero la línea de código es corta.
Para esto empleamos el tag de la siguiente forma:
"<textarea rows="2" cols="60">TEXTO DENTRO DEL AREA</textarea>"
Donde:
- rows: es el número de filas o largo.
- cols: es el número de columnas o ancho.
- número entre comillas: son el tamaño del objeto.
Dicho esto podemos dar un ejemplo, si aplicamos el código anterior, tendríamos un área de texto de 2 de alto y 60 de ancho:
De esta forma ya tenemos un recuadro donde podemos publicar libremente código sin tener que preocuparnos del código que afectara a nuestra entrada.
Igualmente existen varias páginas que traducen el código a uno que, en este caso, blogger pueda interpretar sin necesidad de usar estas áreas de texto. la página se llama Simple Code, y consiste en dos áreas de texto.
En la primera colocamos el código que queremos traducir al lenguaje de blogger para no tener problemas al publicarlo, y en la segunda, luego de haber dado click al botón de procesar, tenemos el código traducido, y luego lo que debemos hacer es copiar y pegar nuestro texto y colocarlo en su respectivo lugar, en la parte de "Edición de HTML" de blogger.
También, un poco más abajo, contamos con una parte donde dice "preview", en donde se muestra el resultado final de todo el código y de como se vera al momento de publicarlo en la entrada. No se si funcionara para otros blog's ya que solo lo he probado en blogger y no en wordpress ni nada por el estilo.
Otra forma que tenemos es crear una clase que tenga un contenedor, como una especie de caja de texto, y que lo llamemos desde cualquier lugar de nuestra entrada.
Para ello debemos ubicarnos en "Diseño" y luego en "Edición HTML", buscamos la línea de código:
]]></b:skin>
Y justo antes (arriba de esa línea), colocamos lo siguiente:
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}Luego de esto, en la creación de entrada hacemos lo siguiente:
<div class="codeview">
Aquí va el contenido de la caja.
</div>
Espero que esto sea de ayuda, ya que para los ejemplo en java y ejemplos con código similar, es muy útil utilizar este tipo de herramientas y así poder evitarnos engorrosas soluciones. La idea original fue vista en Blogger Accessories, en la entrada Display CSS codes and Scripts in unique Style.
Recibe notificaciones por correo
Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.
Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión