Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Aprendendo CSS e HTML Iniciantes Vanessa S.

Elementos Básicos do Blogger e suas variáveis

Bom, para aqueles blogueiros que  adoram mexer no template, querendo ou não, precisam ter um mínimo de conhecimento de HTML/ CSS e dos códigos do Blogger, devem saber e conhecer pelo menos o básico para entender do que se trata cada código.
Resolvi criar uma serie de dicas desse tipo para ajudar vocês a desvendar a maioria deles.
Colocarei aqui os códigos e suas respectivas variáveis. Vou postar as principais e as mais usadas no Blogger.

E para iniciar a serie sobre Variáveis CSS e os Elementos do Blogger
Hoje postarei sobre os elementos básicos do Blogger e sobre algumas tags, e são eles:

ENTENDENDO SOBRE OS ELEMENTOS BÁSICOS DO BLOGGER:

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.
Designer de modelo:
.header-outer – área do cabeçalho
.Header h1 – título do blog
.Header h1 a – link do nome do cabeçalho
.Header .description – descrição do blog

#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
No designer de modelo este trecho está representado por: .content-outer

#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)

#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).
Nos templates Designer de Modelo: Não há como eu informar precisamente o código correspondente a sidebar existentes nos templates designer de modelos, pois devido a facilidade de poder escolher como dividir as colunas da sidebar, o código referentes a sidebar podem variar dependendo do modelo que você estiver usando e da quantidade de colunas que você já tiver determinado.
Entretanto, posso deixar uma dica para que você mesmo possa tentar localizar o trecho referente a coluna sidebar.
Para identificar o código referente ás colunas sidebar no seu template, é necessário que você já tenha widgets instalados na sidebar, para facilitar a identificação.
Entre na edição html do seu template é procurar pelo título que você deu a cada widget.

#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.footer-outer – (Designer de modelo)

.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.)
.date-header span (data da postagem – designer de modelo)
h3.post-title ( títulos dos post – designer de modelo)
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-header corresponde a linha que vem logo abaixo do título do post.
.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).
Veja como personalizar o blockquote, neste artigo: Personalizar a função Blockquote no Blogger

#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.
Nos designer de Modelo, este trecho está representado por: .blog-pager
.blog-pager-older-link, .home-link, .blog-pager-newer-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
Setas de navegação flutuante no Blogger

.feed-links: corresponde ao trecho “Assinar: Postagens (Atom)”.
Se quiser saber como retira-lo, recomendo a leitura deste artigo: Retirar link 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 quiser confira a série Aprendendo CSS/HTML para conhecer outros elementos.

Leia também: Como Ganhar Dinheiro no Youtube

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

16 Comentários

  1. Gabriel Rocha disse:

    Eu tenho uma dúvida, como faço para tirar a margem do entre espaço que da no cabeçalho. Estou usando o template “Simples” do blogger.

    Alguém em qual elemento eu vou?

  2. Adoro seus posts! Dá pra entender bastante coisa sem enrolação, o que é fundamental.
    Parabéns e ainda mais sucesso!

  3. É sempre bom saber como personalizar o blog para que fique mais profissional possível.

    Muito aproveitável!

  4. Paulo Santos disse:

    Olá, Vanessa! Tudo bem? Adoro seu blog! Sempre que preciso fazer alguma alteração em meu blog, eu a procuro primeiro (rs). Gostaria de saber se você conhece alguma forma de transformar uma página estática em uma página semelhante à principal, que exiba as postagens. Estou utilizando um método que consiste em exibir duas estruturas que se comportam como páginas, por exemplo dua divs cujos conteúdos são informações genéricas e postagens respectivamente. Às divs, eu atribuo o estilo display:block e display:none respectivamente. Em uma página estática eu crio um iframe com width:100% e height:100% cuja atribuição de src refere-se ao link da página principal. Na página principal, então, eu crio um código javascript que, ao detectar a página estática, inverte os estilos das divs para display:none e display:block respectivamente. Assim, o conteúdo da primeira div deixa de ser exibido passando a exibir o conteúdo da segunda div. Ou seja, quando o navegador abre o link da página inicial do blog, o mesmo passa exibe apenas um conteúdo genérico qualquer, e quando o navegador abre o link da página estática e questão, o blog passa a exibir as postagens. Portanto, eu tenho um site que exibe o “blog” em uma página separada. Minha pergunta é: há alguma forma de exibir as postagens em uma página estática sem o uso de iframe? Obrigado!

  5. Ótimo post, parabéns!

  6. Adoro suas postagens, são realmente muito explicativas, obrigado sempre pelas ajudas 🙂
    http://ummarinheiro.blogspot.com.br/

  7. Saudações de BH!!

    UAU

    Que gentileza dividir conosco esses conhecimentos básicos de HTML!

    NUNCA vi um metablogger fazer isso! Valeu!

    Fique com Deus. Saúde e Paz!!

    ~~~

  8. Vládia disse:

    Dúvida: quero criar um template mínima de teste. Após criar o blog devo voltar para os modelos clássicos pra isso? ou seria o modelo “simples”, que se refere? não encontrei nenhum modelo com o nome mínima.

    • Vanessa disse:

      Os templates mínima eram templates padrões do próprio Blogger. Depois que eles lançaram os Designer de modelos, retiraram os templates mínima de linha.

  9. Vládia disse:

    Quero ser assim quando eu crescer! 🙂 Brincadeiras a parte, parabéns. Simples e muito bem organizado.

  10. David disse:

    O post é bom, porém por incrível que pareça é muito mais complicado criar templates para blogger do que temas para wordpress.
    Prefiro usar o wordpress, porém muito bom o post 😉
    Atenciosamente David Almeida

  11. Raul Brener disse:

    não consigo achar #sidebar-wrapper

  12. Saula.Cecília disse:

    Muito bom, me ajudou a saber sobre as coisas do blogger XD

  13. Luiz Filipe disse:

    Muito Bom, o post, se possivel pode me ajudar dizendo outros elementos que faze parte do CSS do Blogger ex: post e etc. se puder ira me ajuda muito.Agredeço desde ja.Obrigado

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.