Configurando as partes dos Artigos do Blog

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

Há partes muito importante na estrutura de seu blog que podem, se bem usadas, melhorar a navegabilidade de suas páginas, mantendo o leitor por mais tempo e até gerando receita, ganhos, para o seu trabalho com blog. Não é apenas a barra lateral (sidebar) que deve ser usada para chamar a atenção dos visitantes, nem é o único lugar para colocar publicidade. O roda-pé dos artigos e abaixo dos títulos são lugares privilegiados e é bom saber colocar elementos ali.

 


Nesse tutorial vamos entrar um pouco mais no código-fonte de seu blog para entender como personalizar as partes que cercam seus artigos e usar isso a seu favor. É bom conhecer um mínimo das partes do código-fonte do template que você usa para que você possa usar de forma mais eficiente os recursos disponíveis.

Essas partes podem ser usadas de várias formas. O que mais recomendamos é que seja para adicionar elementos permanentes, que precisam aparecer em todos os artigos da mesma forma, como o link para assinar Feeds ou alguma publicidade. Mas fica por conta da sua imaginação.

 

Sempre que for fazer qualquer modificação em seu código-fonte recomendamos duas coisas. Primeiro que faça testes: tenha um blog só para testar mudanças no template e evitar sustos no original. Assim você vê como ficará e só vai aplicar o que ficar perfeitamente funcionando. Segundo: faça um backup de seu modelo de template. Caso algo sair errado ou você quiser reverter o processo e não souber como fazer ou perder algo importante em seu layout, basta restaurar a cópia:

 

Vamos usar aqui como padrão o modelo de template básico do Blogger, que é o Minima. Assim temos algo comum para que depois você faça seus testes e verifique como está em seu template.

Veremos como adicionar elementos às partes indicadas como exemplo na imagem:

 

partes-artigos-blogger

 

Vá no menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”.

 

Parte 1 – Abaixo do Título dos Artigos.

Procure por:

 

<div class='post-header-line-1'/>

 

Essa é a linha que indica onde você vai colocar o que desejar aparecer abaixo dos títulos de seus artigos. Você pode colocar qualquer coisa, de um simples texto, à imagens e links ou mesmo banners de publicidade do AdSense ou de outro programa afiliado que você participa. Aqui no [ Ferramentas Blog ] você pode ver que temos um bloco de anúncios do AdSense e um ícone de Feed para divulgar este serviço e incentivar que acompanhem nossas atualizações.

Assim, tudo o que você colocar aí, imediatamente abaixo dessa linha de código, aparecerá seguindo o título de seus artigos.

 

Parte 2 – No roda-pé dos Artigos.

Essa é a parte que precisa de um pouco mais de atenção, pois é preciso fazer testes para ter certeza de que ficou posicionada abaixo dos artigos, sem erro. Basicamente existem três linhas que compõem o roda-pé dos artigos e é preciso testar em seu template qual será a mais adequada para incorporar o que você quiser colocar ali.

Procure por:

 

<div class='post-footer'>

 

E, abaixo disso tente encontrar as seguintes linhas (elas não vêem todas juntas, então procure por cada uma individualmente):

 

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

 

Pode-se entender que o roda-pé de todo artigo é composto, portanto, por três linhas. Mas a mais importante e comum é a primeira. Existem algumas variações nesse código que pode aparecer um pouco diferente dependendo de seu modelo de template, da seguinte maneira:

 

<p class='post-footer-line post-footer-line-3'/>

Em lugar de “div” virá “p” e no final uma barra “/”.

 

Configurando.

Se você simplesmente colocar algo abaixo dessas linhas, seja para aparecer depois do título ou para o roda-pé, aparecerá sempre, até na página principal. Mas, note como fazemos aqui no [ Ferramentas Blog ]: alguns elementos só aparecem quando você abre o artigo. Haja vista os blocos de anúncios do AdSense que só são vistos dentro de cada artigo e não aparecem na página principal do blog quando está com resumo de postagem.

 

Para fazer isso é preciso colocar um código condicional. Esse código é bem simples e é padrão para que qualquer coisa dentro dele só seja vista quando o artigo for aberto individualmente.

Siga o modelo.

 

Escolha onde quer colocar algo, por exemplo, abaixo do título do seu artigo, que você queira que só apareça quando a pessoa entrar no artigo. Procure no código-fonte a linha que indiquei acima na Parte 1 do tutorial e cole o que desejar da seguinte maneira:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

O que deseja que apareça abaixo do título do artigo.

</b:if>

 

O código indicado em azul é a condicional. O que ficar entre essas linhas só vai aparecer quando se entrar no artigo individualmente. Pode ser usado no roda-pé dos artigos, seguindo as etapas da Parte 2 também.

 

Faça seus testes e modificações e aprenda a usar de forma eficiente as partes de seu blog para melhorar e personalizar cada vez mais.

 

Artigos relacionados que podem te ajudar:

Quer ser um(a) Blogueiro(a) de Elite? Acesse AGORA: http://blogueiro.pro

10 Comentários

  1. Ola Marcos
    Consegui fazer conforme tu ensinou, mas não fica um link clicavel, apenas o endereço fica lá. Como posso arrumar, para adsense não funcionou, apaenas colei o codigo.

    Responder

  2. Não consegui adicionar o botão de Retweet no meu blog de jeito nenhum. Eu tenho o código, mas não sei aonde colocar – não acho o header nem o footer na parte de HTML. Eu uso o template Rounders 3.
    Alguma idéia?

    Responder

  3. @Hug9000,

    vc deve estar esquecendo de marcar a opção “Expandir modelos de widgets”, pois sem isso não há como ver as linhas indicadas.

    Responder

  4. Salve Marcos,

    Tem outro lugare além desses. Botando logo abaixo do título dos artigos fica uma barra em branco ocupando a altura do botão. Gostaria de por no corpo do post, como neste teu novo template.

    Valeu!

    Responder

  5. Este post é muito bom, porque serve para uma infinidade de coisas, que auxiliam e muito na hora de personalizar o blog…
    Muito bom mesmo…

    Responder

  6. Marcos, pela milionésima vez vou lhe fazer uma pergunta aqui no Ferramentas e espero que pelo menos desta você me responda…

    Seguinte: eu não entendo nada de códigos html`s e afins. Tenho uma conta no Adsense há muito tempo por sugestão sua e morro de vontade de aplicar isso ao meu blog. No entanto, não sei se é ignorância minha, ou se é pq não é possível adicionar adsense em blog WordPress.com, mas nunca consigo!

    O que quero saber é: eu, humilde usuária de WordPress.com, posso usar o adsense? Se sim, pelo amor de Deus, como eu coloco isso no meu blog? Já tentei mil coisas, já pesquisei em mil site, mas nunca consigo (na verdade, sequer entendo onde é que eu tenho de colocar o meu código dentro do código que os sites mostram…)

    Enfim, minha pergunta ficou super confusa, mas, por favor, me responda?

    Responder

    • Ana,

      Sua pergunta é pertinente, mas o problema é que foi feita no lugar errado. Por isso mesmo que outras perguntas suas foram excluídas. As regras para comentários no Blog são claras: só permitimos comentários e perguntas que sejam relacionados ao tópico do artigo. No caso, sua pergunta é sobre o AdSense e nào tem nada a ver com o assunto desse tutorial aqui.

      Mesmo assim, aqui vai a sua resposta:
      – Não, o WordPress.COM não permite a inserção de códigos de anúncios de terceiros, incluindo o AdSense. Infelizmente não é possível e não há nada que possa ser feito para reverter isso. Só trocando para o WordPress.ORG, para o Blogger ou qualquer outra plataforma que suporte o AdSense.
      Aqui o aviso oficial: http://en.support.wordpress.com/advertising/

      Da próxima vez que tiver uma pergunta, procure o assunto adequado ou envie sua dúvida pelo formulário de contato.

      Grato!

      Responder

      • Hum! Obrigada por responder, Marcos!

        Já havia enviado algumas perguntas via formulário e já havia feito várias outras nos artigos pertinentes. Bem como acredito que esta seja pertinente a este assunto, pois minha dúvida está relacionada a códigos.
        De qualquer modo, me desculpe. Eu havia aberto vários posts recomendados no seu último post sobre o AdSense e acabei mandando a pergunta neste aqui.

        Mais uma vez, obrigada por sanar minha dúvida. Eu já suspeitava que houvesse alguma restrição ao wordpress.com, mas acreditava ser possível que o problema era comigo, não com o site.

        Abraços.!

        Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.