29 oct. 2012

Como incluir código en tus post de blogger

Tutorial blogger: Como añadir código a tus post

En ocasiones queremos incluir código fuente en los artículos de nuestro blogger para mostrar a nuestros lectores un ejemplo práctico con el que resolver sus dudas.

Algunos bloggers utilizan el tag blockquote para escribir el código, recordemos que blockquote marca una sección de nuestra página o artículo como si fuera una referencia de otra fuente, estéticamente aplica una sangría y poco más.

La opción que yo suelo utilizar para añadir código a mis post de blogger es la siguiente:
  1. Edito el html de la plantilla que utilizo en mi blog.
  2. Desde el menú principal de blogger seleccionar la opción Plantilla y a continuación pinchar sobre Edición de HTML
  3. Esto abrirá un cuadro de diálogo donde deberemos seleccionar la opción Continuar.
  4. En este momento veremos el código HTML de la plantilla que estemos utilizando en nuestro blog.
  5. Ahora buscaremos el siguiente texto: ]]></b:skin>
  6. Recordad que para buscar rápidamente podemos utilizar la combinación de teclas Ctrl + F
  7.  Justo antes del texto del punto número 5 pegaremos el siguiente código:
code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}

Explicación:  Con el código anterior estamos creando la code y asignándole unas determinadas características como por ejemplo:
  1. background: Color del fondo en hexadecimal.
  2. fonf-family: Tipo de letra
  3. display: Especifica cómo se mostrará el html resultante.
  4. border: ancho, tipo y color del borde que rodeará al texto.
  5. padding: espacio entre el texto y su contenedor.
¿Cómo se utiliza?: Muy sencillo, para incluir código en un post de blogger deberás seguir los siguientes pasos:
  1. Pulsar el botón HTML del editor.
  2. Escribir en código que quieres mostrar en tu post entre las siguientes tags <code></code>


Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha