Bom, para aqueles blogueiros que assim como eu adoram mexer no template, querendo ou não, precisamos ter um mínimo de conhecimento de HTML/ CSS e dos códigos do Blogger, devemos 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).
#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.
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
.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 quiser confira a série Aprendendo CSS/HTML para conhecer outros elementos.
