Tecnologia para o mundo!

Nosso Blog

Compreendendo HTML do Blog

O “Body” é o corpo do blog, onde você pode alterar o plano de fundo (background), escolhendo uma cor ou imagem, se preferir.

“#header” é o cabeçalho do blog, onde geralmente se encontra o título do blog. É a parte superior do blog. As seguintes variáveis normalmente fazem parte dessa seção:

  • #header-wrapper: abrange toda a área do cabeçalho.
  • #header-inner
  • #header: corresponde à coluna dentro do cabeçalho.
  • #header h1: representa o nome do cabeçalho (título do blog).
  • #header a: refere-se ao link do nome do cabeçalho.
  • #header .description: é a descrição do blog dentro do cabeçalho.

“#outer-wrapper” é a área total das colunas. Geralmente engloba o cabeçalho, coluna de postagens, barra lateral e rodapé.

“#main-wrapper” é a coluna que contém as postagens nos templates “mínima” e na maioria dos templates modificados. Isso inclui a coluna de posts, rodapé dos posts, área de comentários e links de navegação. Nos templates “Designer de Modelo”, essa seção é representada por “.main-outer”. Saiba mais em: Personalizando a Área de Postagem (Main-Wrapper).

“#sidebar-wrapper” é a área total da coluna onde ficam os gadgets/widgets e o perfil. As seguintes variáveis normalmente fazem parte dessa seção:

  • .sidebar: o conteúdo da coluna.
  • .sidebar ul: a lista de links completa.
  • .sidebar li: itens das listas de links.
  • .sidebar .widget: onde o conteúdo de cada gadget é exibido.
  • .sidebar h2: o título dos gadgets.

“#newsidebar-wrapper” é a nova coluna. Geralmente presente em blogs de 3 colunas.

“#footer” é o rodapé do blog, normalmente composto por:

  • #footer
  • #footer-wrapper

A classe “.post” corresponde à coluna de postagens. Nela, todo o espaço da postagem é ocupado (data, título, parágrafo, imagem do post, rodapé do post, link de comentários, etc.). Também são comuns as classes:

  • .post-outer
  • .post-body: o corpo do texto da postagem, onde a fonte do texto é definida.

A classe “.post-footer” se refere ao rodapé das postagens, com variáveis como:

  • post-footer-line-1
  • post-footer-line-2
  • post-footer-line-3

A classe “.comment-link” corresponde aos links de comentários na página inicial, geralmente dentro da coluna do rodapé do post.

As classes “.post img” e “.post-body img” se referem às imagens dentro e publicadas nas postagens, respectivamente.

A classe “.post blockquote” destaca trechos de texto, geralmente citações.

“#comments h4” é o título “Comentários” na página interna. Para mais informações sobre a área de comentários, recomendo ler o artigo: Desmembrando a Área de Comentários.

“#blog-pager” inclui os links de navegação do blog, como #blog-pager-newer-link e #blog-pager-older-link. Saiba mais sobre personalização dessas variáveis em: Alterar Links de Postagens Mais Antigas e Recentes, e Customizar os Links de Navegação do Blogger.

“.feed-links” corresponde à parte “Assinar: Postagens (Atom)”.

A classe “.profile” corresponde ao gadget “Perfil”.

“Padding” determina as margens internas, ou seja, a distância entre o conteúdo de um elemento e sua borda. Exemplo: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

“Margin” determina a distância entre um elemento e outro. Exemplo: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda). Para mais informações sobre padding e margin, leia: Diferenças entre Margin e Padding.

“Width” determina a largura do elemento.

“Height” determina a altura do elemento.

“Float” determina a flutuação do elemento, ou seja, sua posição. Exemplos:

  • float: left – posiciona o elemento à esquerda.
  • float: right – posiciona o elemento à direita.
  • float: center – posiciona o elemento ao centro.

As pseudo-classes “a:link”, “a:visited” e “a:hover” se referem aos diferentes estados dos links no blog: ativos, visitados e quando o mouse passa sobre eles. Para mais informações sobre links, leia: Conhecendo a Propriedade CSS Link.

Tags são as etiquetas em HTML que informam ao navegador como exibir os elementos no blog. Elas têm a forma “<>” quando abertas. Alguns exemplos de tags básicas:

  • <p>: parágrafo
  • <b>: negrito
  • <i> ou <em>: itálico
  • <u>: sublinhado
  • <br>: quebra de linha
  • <ul> e <ol>: listas
  • <a>: links
  • <span>: estilização de texto

Lembre-se de que toda tag aberta “<>” deve ser fechada no final “</>” para que o código seja aceito.

Deixe suas sugestões sobre o assunto nos comentários…

Esta gostando do conteúdo? Compartilhe!

Você pode gostar também: