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>

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.