Receba todas as novidades em 2021.

    11 maio 2020

    Entendendo o template do blogger

    🗨
    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



    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.


    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 .

    .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 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.

    Atualizações do Instagram