Marketing de Conteúdo

Blogger: estilo CSS para código em seu blog

Um amigo me perguntou como eu fazia as regiões de código na entrada do Blogger. Fiz isso utilizando uma tag de estilo para CSS em meu modelo do Blogger. Aqui está o que adicionei:

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 é uma regra CSS voltada para HTML <p> elementos com o nome de classe “código”. Isso significa que qualquer parágrafo com esta classe será estilizado de acordo com as seguintes propriedades.
  2. font-family: Courier New;: esta propriedade define a família da fonte como “Courier New”. Ele especifica a fonte que será usada para o texto nos elementos de destino.
  3. font-size: 8pt;: esta propriedade define o tamanho da fonte para 8 pontos. O texto dentro dos elementos de destino será exibido neste tamanho de fonte.
  4. border-style: inset;: esta propriedade define o estilo da borda como “inset”. Ele cria uma aparência afundada ou prensada para a borda ao redor dos elementos alvo.
  5. border-width: 3px;: esta propriedade define a largura da borda em 3 pixels. A borda ao redor dos elementos terá 3 pixels de espessura.
  6. padding: 5px;: esta propriedade adiciona 5 pixels de preenchimento ao redor do conteúdo dentro dos elementos de destino. Ele fornece espaçamento entre o texto e a borda.
  7. background-color: #FFFFFF;: Esta propriedade define a cor de fundo para branco (#FFFFFF). O conteúdo dos elementos direcionados terá um fundo branco.
  8. line-height: 100%;: Esta propriedade define a altura da linha para 100% do tamanho da fonte. Garante que as linhas do texto sejam espaçadas de acordo com o tamanho da fonte.
  9. margin: 10px;: esta propriedade adiciona uma margem de 10 pixels ao redor de todo o elemento. Ele fornece espaçamento entre este elemento e outros elementos da página.

O código CSS fornecido define um estilo para parágrafos HTML com a classe “código”. Ele define a fonte, o tamanho da fonte, o estilo da borda, a largura da borda, o preenchimento, a cor de fundo, a altura da linha e a margem desses parágrafos. Esse estilo pode ser aplicado a trechos de código ou texto pré-formatado em uma postagem do Blogger para dar-lhes uma aparência específica.

Veja como ficará:

p.código {
família de fontes: Courier New;
tamanho da fonte: 8pt;
estilo de borda: inserção;
largura da borda: 3px;
padding: 5px;
cor de fundo: #FFFFFF;
altura da linha: 100%;
margin: 10px;
}

Boa Codificação!

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.