Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Postagens Vanessa S.

Escolhendo o local para instalar elementos na área dos artigos

Nesse tutorial vamos aprender um pouco mais sobre o código-fonte de seu blog, afim de entender como configurar as partes que cercam seus artigos,para que você escolha melhor onde colar alguns códigos, como por exemplo, códigos de botões para redes sociais.
Conhecendo mais a fundo o código fonte desta àrea no seu blog, fará com que você possa usar , ou instalar, de forma mais eficiente os recursos disponíveis, como por exemplo, adicionar elementos permanentes (botões, link de feed etc) que irão aparecer em todas as suas publicações de artigos, facilitando assim, que você escolha melhor onde colar alguns códigos.

Veja imagens demonstrativas:

Veremos como adicionar elementos às partes indicadas na figura acima.
[becape]Lembrando que, é sempre bom fazer um backup do seu Template para evitar transtornos, se algo sair errado.[/becape]

1) Adicionar elementos na linha abaixo do Título:

Sempre que você quiser adicionar um elemento, e fazer com que ele apareça na linha abaixo do titulo do post, você deverá SEMPRE buscar a tag:

<div class=’post-header-line-1′>
Dependendo de seu modelo de template, esta linha acima podeá estar da seguinte maneira:


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

ATENÇÃO: Se o código estiver assim: <div class=’post-header-line-1′/>
com a barra no final, substitua-o por:


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

</div>

Sendo assim, todo código que você colar abaixo dessa linha de código, aparecerá seguindo o título de seus artigos.
Outra opção de instalar um elemento dentro da postagem e que apareça logo acima do corpo do post é instalá-lo logo ACIMA da tag:


div class='post-body entry-content

Para localizar estas tags acima não esqueça que você deverá clicar em “expandir modelos de widgets”, no modo “editar HTML”!

2) Adicionar elementos na linha do Rodapé:

Existem 4 linhas que compõem o rodapé das postagens.

Para instalar algum elemento nesta linha, será necessário que você teste em seu template, para verificar qual dessas linhas será mais adequada a incorporação do que você quer que apareça lá. ((Para localizar as tags a seguir, não esqueça que você deverá clicar em “expandir modelos de widgets”, no modo “editar HTML”)).

<div class=’post-footer’>

Abaixo deste trecho, você vai encontrar as seguintes linhas (você terá que procurá-las individualmente, pois elas não veem juntas):


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

Observação: Dependendo de seu modelo de template, as linhas acima poderão estar da seguinte maneira:


<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/'>

ou assim:


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

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

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

ou


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

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

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

Sendo assim, todo código que você colar abaixo dessas linhas de código, aparecerá sempre no rodapé de seus artigos.

1)Autor do Post | 2)Link de Comentário | 3)Marcadores

Todo e qualquer elemento que você colocar algo abaixo dessas linhas, seja na linha abaixo do titulo, ou na linha do rodapé, os elementos instalados aparecerão também na página principal. Mas se você quiser que o elemento instalado apareça apenas na Página Interna (área do seu artigo), você deverá acrescentar uma condicional.
Veja como:


<b:if cond="data:blog.pageType == "item"">

tag escolhida

O código do elemento que deseja que apareça na tag escolhida.
</b:if>

O código destacado em “azul” é a condicional.
O código destacado em “verde” é a linha que se refere ao local onde você escolheu para colar o código do elemento que você quer instalar.
O código destacado em “laranja” é o código de instalação do elemento.

Exemplificando para um melhor entedimento:
Digamos que você queira instalar um gadget com botões para compartilhar seu post nas redes sociais na linha abaixo do titulo da postagem:
O código completo deverá ficar assim:


<b:if cond="data:blog.pageType == "item"">
<div class='post-header-line-1'>
Código do botão
</div>
</b:if>

Sobre ocultar ou mostrar botões ou elementos em páginas específicas, veja mais sobre as condicionais no artigo:
Ocultar Elementos em Página Específica

Com essa dica você aprende a usar de forma mais eficiente as partes de seu blog e com isso pode ir melhorando e personalizando cada vez mais seu template.

Mas lembre-se, antes de salvar qualquer modificação, faça testes e vá visualizando, até que você consiga configurar tudo do jeitinho que você quer.

Artigo atualizado em 26/05/2012.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

42 Comentários

  1. Igor disse:

    Olha, no meu template não tem a
    e eu já tentei daquela outra forma no site do Addthis que ele instala o widget automaticamente no template.

    E mesmo assim não aparece os códigos. Você poderia me dizer o que devo fazer? Ou é problemas no template?

  2. Ryan Brag disse:

    Desculpe-me,mas eu não entendi nada,eu tenho que colcar o que a onde???

    • Vanessa disse:

      Este artigo tem por objetivo fazer com que o usuário conheça as partes que cercam a área dos post.

  3. Eddy disse:

    Oii Clau, olha seu site me ajuda muito e estou com uma dificudade aqui.. Queria muito saber como eu coloco a caixinha “assine nossa newsletter” no final da minha bostagem… assim como esta no seu blog.. e se vc tem o codigo dessa caixa…

    desde ja agradeço a atenção…

  4. .:: Nessa ::. disse:

    @Universo Preterista:
    Esse artigo é somente para auxiliar vc a escolher o local para adicionar elementos..Vc já deve ter o código e já deve saber o que vai adicionar.

  5. Universo Preterista disse:

    Como encontro o código do botão?

  6. Franklin Oliveira disse:

    Olá Clau, passei um tempo sem mexer no blog, só agora estou retornando, vou fazer os testes e depois eu lhe digo o resultado. Obrigado pela dica. Abs.

  7. .:: Nessa ::. disse:

    Franklin
    Não tem como eu te dizer ao certo, pq cada template os códigos variam de uns para outros, mas posso te dar uma sugestão: Vc pode tentar adicionar a linha <div class='post-footer-line post-footer-line-3'>
    ..tenta adiciona-la após div class='post-footer'
    Mas não esqueça que vc terá que fechar a div que vc adicionar…por exemplo:

    <div class='post-footer-line post-footer-line-3'>
    <—-código do elemento que vc quer aqui–>
    </div>

  8. Franklin Oliveira disse:

    Olá Clau, que bom que está retornando, no meu blog não possui a linha div class='post-footer-line post-footer-line-3' nenhum dos modelos citados por vc. Tem alguma forma de adicionar essa linha pois não consigo colocar as redes sociais na postagem.

  9. Jefferson Monteiro disse:

    =D bela dica valeu mesmo

  10. Jefferson Monteiro disse:

    Valeu, valeu, valeu, valeu mesmo!!! *-*

  11. fernandocaesar disse:

    muito obrigado pela ajuda, to aprendendo muita coisa no seu site valeu

  12. Norton Tavares disse:

    Excelente tutorial. Obrigado.

  13. Damix disse:

    Muito bom seu blog esta de parabens =D

  14. .:: Clau ::. disse:

    Juliana Netto
    O problema deve ser no botão desse serviço que vc escolheu. Não tenho como saber o que ocorre e nem como te ajudar. Só posso te sugerir que use outro tipo de serviço para compartilhar seus posts, como o addthis, por exemplo.

  15. Juliana Netto disse:

    No blog de teste que criei, miscali.blogspot.com, consegui através dos tutoriais daqui, a colocar o botão de compartilhamento do addtoany nos rodapés dos meus posts.

    Conforme explicado muito bem auqi, fui lá em div class='post-footer-line post-footer-line-1' e colei o código gerado pelo addtoany.

    Até aí, tudo certinho.

    Só que na hora de compartilhar, quando clico no botão do twitter, por exemplo, ao invés de gerar o link de um post específico, gera o link do meu blog como um todo.

    Como faço para que cada post receba um link específico?

    Att.

  16. Natália disse:

    Eu consegui menina!
    Isso já estava me deixando nervosa de verdade.
    Brigadim!!!

  17. .:: Clau ::. disse:

    Natália
    Dá uma lida no artig sobre a propriedade text, neste item:
    Text-transform:Transformação de textos

  18. Natália disse:

    Olá Clau… No meu blog, tudo que se refere a rodapé, ou seja todo testo que escrevo no rodapé da página ou dos posts se transformam em letras maiúsculas. Gostaria de saber como resolver isso.
    Podes me dar um help?

  19. .:: Clau ::. disse:

    Gustavo
    Não há como eu saber como se apresenta os códigos no seu template.
    Vc vai ter que tentar descobrir qual trecho de código se refere aos titulos dos posts e colocar o código do botão retweet abaixo dele.

  20. Gustavo Silva disse:

    Olá, Clau.

    Preciso de sua ajuda. Meu template não tem as tags de "post-header" (nenhuma das duas opções que você mostrou)

    Porém, preciso colocar um botão de retweet abaixo do título do post. Há alguma outra maneira de fazer isso?

    Obrigado desde já.

  21. Kiko Andrade disse:

    Sempre com ótimos artigos, parabéns!

  22. MoZa Lima disse:

    Olá de novo Clau!
    Tenho o código do LinkWhitin pra instalar no Blog logo abaixo do rodapé da postagem. Tentei instála-lo diretamente no HTML na parte "post.footer" mas ele sempre fica em cima do rodapé como se fizesse parte do post. Sabes onde coloco o código pra ficar abaixo do rodapé, Clau?

  23. Lucas disse:

    Onde cola-se este còdigo?

  24. Lukas disse:

    Clau,seus tutoriais são perfeitos!

  25. ::Clau:: disse:

    @Fernanda Maria:
    Vc deve estar fazendo algo errado. Infelizmente não há como eu te ajudar, pois para cada caso é um caso, não há como eu saber especificamente o aconteceu com seu template.

  26. Fernanda Maria disse:

    Olá,
    Eu estou tentando de todas as formas configurar como você disse,coloco onde você falou mas aparece a seguinte mensagem:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:if" must be terminated by the matching end-tag "".

    Já tentei de um tudo e nada.
    O que pode ser? sera que você conseguiria me ajudar?
    Faz tempo que quero que os botões sociais apareçam apenas nos posts internos.
    Desde já agradeço a ajuda

  27. ::Clau:: disse:

    @Ronaldo Pereira Borges:
    Fique a vontade para explorar o conteúdo que temn por aqui, com certeza ainda encontrará mais coisas que irão te ajudar na personalização do seu blog.
    Obrigada pela visita e pelo comentário.

  28. Ronaldo Pereira Borges disse:

    Eu só queria ter conhecido seu site antes..

    Sempre fiquei horas e horas para aprender a configurar meu template… Mas o com muita luta hoje estou conseguindo deixar meu site com uma cara bem profissional.

    Parabéns.. ainda vou explorar muito os conteúdos daqui..

  29. Victória Andressa disse:

    Por incrível que pareça, o template data Março de 2010.
    Estou tentando encontrar alguma solução, rsrsrs.
    Sabe aquele template que você não quer de jeito nenhum abrir mão?
    Mas muito obrigada por ter me respondido!

  30. .:: Clau ::. disse:

    @Victória Andressa:
    Que eu conheça não. Nossa seu template deve ser muito antigo, menina!rs Infelizmente não tenho como te ajudar.

  31. Victória Andressa disse:

    Oi, em primeiro lugar adoro todas as dicas e tutoriais daqui, são simplesmente perfeitos, parabéns!
    Agora, você poderia me sanar uma dúvida? Estou quase morrendo aqui de um misto de raiva e um pouquinho de desespero.

    No meu template não tem nenhum desses footer, nem sequer o post-footer. Até quando eu procuro com o ctrl f, eu so acho coment-footer. Existe outro modo que o post footer possa estar?

    Eu gosto tanto do template que estou e não queria perdê-lo :/
    Obrigada!

  32. ::Clau:: disse:

    @Avelino:
    Temuma maneira sim.
    Dá uma lida no tutorial que ensina a instalar o widget de boas vindas e feed
    No tutorail fala sobre "configurar o local de instalação do widget", vc pode utilizar o mesmo procedimento para instalar outra coisa.
    Faz um teste e vê se dá certo.

  33. Avelino disse:

    Olá Clau !]
    Você sabe me dizer se tem algum jeito de colocar um conteudo acima do titulo do post?

    Abraço!

  34. ::Clau:: disse:

    @Clube da risada:
    Fico feliz q tenha ajudado. Obrigada pela visita e pelo comentário. Volte sempre.

  35. Clube da risada disse:

    Muito bom mesmo, tinha muitas dúvidas sobre o assunto!

  36. ::Clau:: disse:

    @Ana Paul:
    @Deze:
    Ao tentar localizar estas tags, vcs marcaram a caixinha "expandir modelos de widgets"? Se não marcarem as tags não irão aparecer mesmo.

  37. Deze disse:

    No meu template também não tem essas tags de header e footer :/

  38. Ana C. Paul disse:

    Oie. Bem, eu tava tentando fazer o que você diz aí em cima para adicionar o Botão de Retweet Editável. Mas não estou conseguindo porque simplesmente não acho os tags que você diz para procurar. Definitivamente não os tem na caixa de html do meu blog (procurei com ctrl+f).
    Pode me mandar um e-mail caso saiba o que fazer? anapaul95@hotmail.com.
    Caso contrário poste a resposta aqui mesmo e eu voltarei para verificar.

    agradeço desde já,
    Ana.

  39. Ajasta Gayatri disse:

    Adooro seu blog ! Suas explicações são completas não deixam dúvidas, você merece !

    Parabéns

  40. ::Clau:: disse:

    @ fada ou bruxa:
    Eu que agradeço sua presença. Volte sempre!

  41. fada ou bruxa disse:

    é ótimo estar aqui com vcs…
    agora quero me aperfeiçoar e aprender a fazer montagens..

    obrigada…

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.