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…
