Bom dia , amigos leitores!
Em uma postagem anterior falei sobre a estrutura do template do blogger hoje vou falar para vocês sobre os elementos básicos , aqueles que temos que procurar cada vez que desejamos inserir uma personalização ou modificação no nosso template , entendendo o template do blogger fica mais fácil saber como e onde podemos personalizar.
Bora lá .
Entendendo o Template do Blogger
Vamos começar então pelos elementos básicos do blogger.
Todo o trecho que iremos ver está acima do fechamento de ]]></b:skin>
body - corpo do blog , onde podemos mudar o plano de fundo, (background) , ou inserir uma imagem , (URL) . 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.
.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.
Mais ou menos à partir desses trechos do códigos vamos achar 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 sequencia 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 .
( 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;
}
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 fui acrescentar 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 pagina inicial.
( mas também pode estar nesse outro trecho em alguns modelos, .post-outer .comments { )
Em */comments*/ é onde podemos personalizar a área dos comentário do blog , ainda não fiz nenhuma alteração nesse código , mas em breve vou testar 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 ai .
Algumas personalizações são adicionadas em outras partes do template , ou anteriormente a inclui-las necessitamos adicionar alguma variável , mas essa parte veremos mais adiante , por hoje é isso espero que gostem e que tenha sido útil .
Em breve vou deixar disponível um template base para ser personalizado , aguardem.
Nenhum comentário:
Postar um comentário
Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.