Como poner código CSS dentro de un post de Blogger

Hoy os voy a contar como hacer una cosa muy interesante, que es como copiar código CSS de una página y poder usarlo para nuestros post de Blogger.

Si vemos por ejemplo el blog "Unix Mantra", en él, usan código CSS de forma muy interesante para darle formato a las muestras de código, o para mostrar valores o comandos en una línea.

Clic para ver

Pues bien, como ejemplo, vamos a copiar los códigos CSS de este blog para mostrar nuestro código de la misma manera o usar las cajitas para mostrar valores, es muy fácil hacerlo en nuestro blog. Pero  vais a poder copiar el código CSS de donde queráis y mostrar los estilos que más os gusten.

Para ello primero debemos copiar el código CSS del origen, ello es muy fácil de hacer con Firefox:

Clic para ampliar

• Colocamos en Firefox el cursor encima del elemento a copiar, en este caso la caja negra con el marco izquierdo en azul de la web indicada anteriormente y pinchamos con el botón derecho del ratón y en el combo que sale elegimos "Inspeccionar elemento".
   
• Nos saldrá abajo una especie de consola con código HTTP y a derecha una serie de pestañas, resaltada una línea que en su etiqueta pone para este caso "com_box", a la derecha pone lo mismo pero delante tiene un # y luego dentro del {}  vienen toda las propiedades de la clase.
  
  Ademas ahora aparece entre varias lineas, encuadrada la caja negra que queremos usar.
   
• En la caja de la derecha, pulsamos encima de "com_box" con el botón derecho del ratón y seleccionamos "copiar regla".
   
• En un bloc de notas vamos a copiar la regla.
   
• Queda algo así:
  
  
   
•  Este es el código CSS que nos va a permitir mostrar las bonitas cajas negras que hemos visto en el post de Unix Mantra.
   
• Ahora hay que agregar este código a Blogger, para eso nos vamos al panel de control del Blogger  --> Plantilla --> Personalizar --> Avanzado -->  Y al final de las diferentes etiquetas, elegimos "Añadir CSS"
   
• En la caja que sale vamos a agregar el código CSS, quitando el "#" y poniendo un "."
  
  
   
• Aquí podemos agregar todos los códigos CSS que queramos.
   
• Pulsamos "Aplicar en blog"

Ahora ya podemos usar este código CSS en nuestros post:

Para el ejemplo de la misma manera hemos copiado la etiqueta "bix" la cual es la cajita color marfil para resaltar texto:

Clic para ampliar

Como veis entre etiquetas "div class="com_box"" hemos puesto el texto que va dentro de las cajitas negras.

Y con la etiqueta "a" más la clase "bix", hemos agregado en un párrafo la cajita color marfil.

¡No olvidéis cerrar las etiquetas con "/"!

Este es el resultado:

Dentro de las etiquetas podéis poner el texto que queráis que aparecerá con el formato de la clase que habéis puesto.

Luego ademas podéis toquetear como queráis las clases, poniendo los atributos que más os guste, incluso crearos clases CSS personalizadas, con el nombre de etiquetas que prefiráis..

Si algo no queda claro, por favor comentarmelo e intentare aclarar más el procedimiento