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
Vanessa S.
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.
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?
Adoro seus posts! Dá pra entender bastante coisa sem enrolação, o que é fundamental.
Parabéns e ainda mais sucesso!
É sempre bom saber como personalizar o blog para que fique mais profissional possível.
Muito aproveitável!
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!
Gostaria de deixar o link para meu Blog aqui nos comentários.
Ótimo post, parabéns!
Adoro suas postagens, são realmente muito explicativas, obrigado sempre pelas ajudas 🙂
http://ummarinheiro.blogspot.com.br/
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!!
~~~
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.
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.
Quero ser assim quando eu crescer! 🙂 Brincadeiras a parte, parabéns. Simples e muito bem organizado.
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
não consigo achar #sidebar-wrapper
TU PRESISA TER O TEMPLATE MINIMA!
Muito bom, me ajudou a saber sobre as coisas do blogger XD
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