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.
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.
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.
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?
Desculpe-me,mas eu não entendi nada,eu tenho que colcar o que a onde???
Este artigo tem por objetivo fazer com que o usuário conheça as partes que cercam a área dos post.
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…
@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.
Como encontro o código do botão?
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.
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>
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.
=D bela dica valeu mesmo
Valeu, valeu, valeu, valeu mesmo!!! *-*
muito obrigado pela ajuda, to aprendendo muita coisa no seu site valeu
Excelente tutorial. Obrigado.
Muito bom seu blog esta de parabens =D
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.
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.
Eu consegui menina!
Isso já estava me deixando nervosa de verdade.
Brigadim!!!
Natália
Dá uma lida no artig sobre a propriedade text, neste item:
Text-transform:Transformação de textos
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?
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.
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á.
Sempre com ótimos artigos, parabéns!
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?
Onde cola-se este còdigo?
Clau,seus tutoriais são perfeitos!
@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.
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
@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.
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..
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!
@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.
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!
@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.
Olá Clau !]
Você sabe me dizer se tem algum jeito de colocar um conteudo acima do titulo do post?
Abraço!
@Clube da risada:
Fico feliz q tenha ajudado. Obrigada pela visita e pelo comentário. Volte sempre.
Muito bom mesmo, tinha muitas dúvidas sobre o assunto!
@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.
No meu template também não tem essas tags de header e footer :/
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.
Adooro seu blog ! Suas explicações são completas não deixam dúvidas, você merece !
Parabéns
@ fada ou bruxa:
Eu que agradeço sua presença. Volte sempre!
é ótimo estar aqui com vcs…
agora quero me aperfeiçoar e aprender a fazer montagens..
obrigada…