Na postagem anterior, conhecendo a estrutura do template do blogger expliquei sobre a estrutura básica e conceito de um template blogger.
Observamos a diferença entre XML e HTML, e as tags que formam o template.
Hoje aprofundaremos mais no assunto e observaremos a parte dos códigos onde podemos realizar todas as alterações visuais do nosso template, uma boa parte de onde inserimos os códigos CSS.
Observamos a diferença entre XML e HTML, e as tags que formam o template.
Hoje aprofundaremos mais no assunto e observaremos a parte dos códigos onde podemos realizar todas as alterações visuais do nosso template, uma boa parte de onde inserimos os códigos CSS.
Template Blogger onde realizar alterações de cores, tamanho e personalizações em geral
- Começaremos então pelos elementos básicos do blogger.
Na maioria dos templates se apresenta, logo após ao final das variables definitions, (que veremos em uma postagem mais adiante), você encontrará:
- /* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
.header - o cabeçalho do blog onde de costume fica o título, as seguintes variáveis fazem parte desse trecho:
.header-wrapper ou .header-inner - corresponde a área total do cabeçalho.
.header h1 - correspode ao nome, (título do blog).
.header h1 a - link do nome do blog.
.header-descripition - a descrição que fica dentro do cabeçalho.
Aproximadamente a partir desses trechos dos códigos acharemos diferença entre os modelos de template, mas a maioria não estará muito diferente.
.content-outer ou #outer-wrapper - área total das colunas, geralmente abrange: área total das colunas, cabeçalho, coluna de postagem, sidebar e footer.
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
.header - o cabeçalho do blog onde de costume fica o título, as seguintes variáveis fazem parte desse trecho:
.header-wrapper ou .header-inner - corresponde a área total do cabeçalho.
.header h1 - correspode ao nome, (título do blog).
.header h1 a - link do nome do blog.
.header-descripition - a descrição que fica dentro do cabeçalho.
Aproximadamente a partir desses trechos dos códigos acharemos diferença entre os modelos de template, mas a maioria não estará muito diferente.
.content-outer ou #outer-wrapper - área total das colunas, geralmente abrange: área total das colunas, cabeçalho, coluna de postagem, sidebar e footer.
.main-outer ou #main-wrapper - coluna total da área de postagem. Esse trecho abrange tudo que estiver dentro da coluna central de postagem, como a coluna de postagem, rodapé dos posts, área dos comentários e link de navegação.
Aqui nesse trecho é onde personalizamos a data das postagens com imagem, arredondadas, em hover e outras formas, quando vamos personalizar apagamos o código abaixo de /*Headings */ e substituímos pelo personalizado.
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
Logo abaixo já encontramos o /*Widgets*/ onde está contido os gadgets da sidebar e onde incluímos as personalizações geralmente abaixo desse trecho. Dentro dessa parte estão contidos tamanho, borda, texto, cor dos gadgets da sidebar.
/* Widgets
----------------------------------------------- */
.main-inner .column-left-inner {
padding: 0 0 0 20px;
}
Na sequência vem /*Post*/, coluna de postagem, nela fica o espaço ocupado pela postagem, incluindo: data, título, paragrafo, imagem do post, link de comentário.... estão representados pelas variáveis:
.post
.post-outer
.post-body - corpo do texto, onde definimos a fonte.
.main-inner .widget h2.date-header {
border-bottom: 1px solid $(widget.title.border.bevel.color);
}
(nesse modelo aqui é onde personalizamos a data, é só troca-los pelo código personalizado)
( mas você pode encontrar o código também dessas outras duas maneiras:
.main-inner h2 data-header{ ou .data header span{ )
.post-header- linha que vem abaixo do título da postagem.
.post-body img { - aqui é a parte que corresponde a imagem publicada dentro da postagem.
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
text-decoration: none;
}
Esse trecho é o correspondente ao título da postagem, é onde personalizamos, centralizamos o título, podemos trocar o código todo.
.post-footer - área do rodapé dos posts.
As variáveis abaixo fazem parte desse trecho, onde geralmente adicionamos elementos na linha do rodapé e personalizações.
post-footer-line-1
post-footer-line-2
post-footer-line-3
#blog-pager - link de navegação do blog, (no meu caso quando acrescentei a paginação numerada do blog, ela só funcionou quando apaguei esse trecho e substitui pelo código da personalização).
.comment-link - geralmente dentro da coluna do rodapé do post, é o link de comentários na página inicial.
(mas também pode estar nesse outro trecho em alguns modelos, .post-outer .comments { )
Em */comments*/ é onde podemos personalizar a área dos comentários do blog, ainda não fiz nenhuma alteração nesse código, mas em breve testarei algumas personalizações.
Em /* Footer*/ rodapé do blog é onde personalizamos o rodapé do template do blog, pode ser com dois ou três gadgets e ainda podemos adicionar o gadget do Instagram antes dos créditos do blog que também incluímos a personalização por esse mesmo.
Também algumas personalizações necessitam hacks ou outro código para seu funcionamento que são inseridos antes dos fechamentos </head> se forem scrips e algumas outras antes de </body>.
Fontes extras, hacks como Twitter Card e Open Graph do Facebook, são inseridos logo abaixo da abertura de <head>.
Por exemplo, se você inseriu a personalização do rodapé de créditos, o texto do mesmo, com link copyright, nome do blog deve ser incluído acima do fechamento da tag </body>, caso contrário não irá aparecer o texto.
Assim possibilitando que você possa trocar cores, fonte através do painel de personalização avançado do blogger sem a necessidade de abrir o HTML, mas essa parte veremos mais adiante, por hoje é isso, espero que gostem e tenha sido útil.
Aproveite para baixar o template base disponível no link abaixo.
Você pode inserir no layout free disponibilizado pelo blog, todas as personalizações publicadas aqui no blog.
Nenhum comentário:
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.