Marketing de contenido

Blogger: estilo CSS para el código de tu blog

Un amigo me preguntó cómo hacía las regiones del código en la entrada de Blogger. Lo hice utilizando una etiqueta de estilo para CSS en mi plantilla de Blogger. Esto es lo que agregué:

p.code {
    font-family: Courier New;
    font-size: 8pt;
    border-style: inset;
    border-width: 3px;
    padding: 5px;
    background-color: #FFFFFF;
    line-height: 100%;
    margin: 10px;
}
  1. p.code: Esta es una regla CSS dirigida a HTML. <p> elementos con el nombre de clase "código". Significa que cualquier párrafo con esta clase tendrá un estilo de acuerdo con las siguientes propiedades.
  2. font-family: Courier New;: Esta propiedad establece la familia de fuentes en "Courier New". Especifica la fuente que se utilizará para el texto dentro de los elementos de destino.
  3. font-size: 8pt;: Esta propiedad establece el tamaño de fuente en 8 puntos. El texto dentro de los elementos de destino se mostrará con este tamaño de fuente.
  4. border-style: inset;: Esta propiedad establece el estilo del borde en "insertado". Crea una apariencia hundida o presionada para el borde alrededor de los elementos objetivo.
  5. border-width: 3px;: esta propiedad establece el ancho del borde en 3 píxeles. El borde alrededor de los elementos tendrá un grosor de 3 píxeles.
  6. padding: 5px;: esta propiedad agrega 5 píxeles de relleno alrededor del contenido dentro de los elementos de destino. Proporciona espacio entre el texto y el borde.
  7. background-color: #FFFFFF;: Esta propiedad establece el color de fondo en blanco (#FFFFFF). El contenido de los elementos de destino tendrá un fondo blanco.
  8. line-height: 100%;: Esta propiedad establece la altura de la línea al 100% del tamaño de fuente. Garantiza que las líneas de texto estén espaciadas según el tamaño de fuente.
  9. margin: 10px;: Esta propiedad agrega un margen de 10 píxeles alrededor de todo el elemento. Proporciona espacio entre este elemento y otros elementos de la página.

El código CSS proporcionado define un estilo para los párrafos HTML con la clase "código". Establece la fuente, el tamaño de fuente, el estilo del borde, el ancho del borde, el relleno, el color de fondo, la altura de la línea y el margen de estos párrafos. Este estilo se puede aplicar a fragmentos de código o texto preformateado en una publicación de Blogger para darles una apariencia específica.

Así es como se verá:

p.código {
familia de fuentes: Courier New;
tamaño de fuente: 8 puntos;
estilo de borde: insertado;
ancho del borde: 3px;
padding: 5px;
color de fondo: #FFFFFF;
altura de línea: 100%;
margen: 10px;
}

¡Feliz codificación!

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.