Elementos do Blogspot

Este exelente tutorial que traz todos os elementos do Blogspot foi emprestado do blog da Clau. É o Mundo Blogger.  Vale muito visitar este blog desta experiente blogueira.

Nomes dos elementos internos do Blogspot e suas funções.

Body: é o corpo do blog. É onde você muda o plano de fundo ou background, colocando uma cor ou uma imagem,se preferir.

#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.

#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.

#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
ATENÇÃO - Nos templates Designer de Modelo,este trecho está representado por: .main-outer

#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.

#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).

#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper

.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)

.post-footer corresponde a área de rodapé dos posts.
As variaveis são:
post-footer-line-1
post-footer-line-2
post-footer-line-3

.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.

.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.

.post blockquote: corresponde aos trechos de textos destacados (citações).

#comments h4: corresponde ao titulo "Comentários" dentro da página interna.

#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
Se quiser, confira algumas formas de personalização desta variável em:

.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".

.profile: corresponde ao trecho do gadget "Perfil".

Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

width: determina a largura do elemento.

height: determina a altura do elemento.

float:determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.

a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover é a forma que o link ficará quando passamos o mouse em cima dele.


Para saber mais, adquira a nossa Apostila.