Magdiel da Silva

Compreendendo HTML do Blog

Body: é o corpo do blog. É onde você muda o plano de fundo (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.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
Veja mais em: Personalizar Área de Postagem (Main-Wrapper)

#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.
Veja mais sobre sidebar em: Personalizando a sidebar

#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.)
Se quiser conhecer um pouco mais sobre a área da coluna de postagem, leia:
• Personalizando a área do Post - (Parte1)
• Personalizando a área do Post - (Parte2)

.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
Se quiser conhecer um pouco mais sobre a área do Rodapé dos seus posts:
• Adicionar elementos na linha do Rodapé
• Personalizar o Rodapé dos Posts

.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.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários

#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:
• Alterar Link Postagens Mais Antigas e Recentes
• Customizar os Links de Navegação do Blogger

.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).
Se quiser conhecer um pouco mais 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(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.
Se quiser conhecer um pouco mais sobre links, leia:
• Conhecendo a Propriedade CSS Link

O QUE SÃO 'TAGS':


TAG significa etiqueta em inglês, é ela que informa ao navegador como determinado elemento deve ser exibido no seu blog.
Ela tem o seguinte forma < > quando aberta.

Veja exemplos de algumas tags básicas abaixo:
<p> - parágrafo
<b> - negrito
<i> ou <em> - itálico
<u> - sublinhado
<br> - quebra de linha
<ul> e <ol> - são as tags que indicam listas
<a> - são as tags que indicam links
<span> - tags que servem para estilizar texto


Lembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.


Se você gostou deste tutorial comente nesta postagem avaliando.
Comentários:
Sem comentários »
Categorias:

0 comentários:

Postar um comentário