Como configurar a data em postagens no Blogger.



Nos templates padrões do Blogger, a data dos posts estão disponíveis na linha acima dos títulos das postagens.
Aprenda a configurar a data, colocando-a na linha abaixo do título ou no rodapé do post.
Se você verificar no código do template, a data do post é mostrada da seguinte forma:




<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>


Em alguns casos você encontrará o código abaixo:



<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
</b:if>



Localize o código referente a data, entre no menu “modelo” >> “editar html”, clique na opção “expandir modelos de widgets” e procure por um dos código mostrados acima.

INSERIR A DATA ABAIXO DO TÍTULO DO POST:
Faça o recorte de todo o trecho correspondente a data, conforme mostrado acima e cole ABAIXO da tag <div class=’post-header-line-1′/>
De regra a tag ‘post-header-line-1′ está fechada com uma barra inclinada no final dela ” />”.
Retire essa barra e feche a tag após a inclusão do novo elemento. Para fechar, use </div> no final do código.
Exemplo:





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

</div>



Após a modificação do código, poderá aplicar vários estilos para a data. Procure por: h2.date-header {.



h2.date-header {


Na linha abaixo, inclua os trechos definindo e os estilos que desejar.



h2.date-header {
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento se quiser*/
padding: /*defina um espaçamento se quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/
}




Poderá substituir o h2.date-header por
por .date-header se preferir.
Poderá adicionar estilos para serem aplicados em toda a linha abaixo do título do post acrescentando o seguinte trecho:





.post-header-line-1 {
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento que quiser*/
padding: /*defina um espaçamento que quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/
}



Se o seu objetivo for incluir a Data na linha do rodapé do post, recorte todo o trecho referente a data, conforme o código acima e cole ABAIXO da tag < div class=’post-footer”> ou se preferir cole ABAIXO de post-footer-line post-footer-line-1
Faça um teste verificando qual das linhas será a mais adequada após a incorporação da data.

COLOCAR A DATA DA POSTAGEM DO BLOGGER NA LINHA DO RODAPÉ DO POST:
Localize o trecho do código correspondente a data dos posts no template.
Acesse o painel do blogger e clique no menu “modelo >> Editar HTML” e marque a opção: “Expandir modelos de widgets”, e procure pelo código abaixo:




<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>



Se não localizar o código completo, utilize ctrl+f e tente localizar a 1º linha do código.
SUBSTITUA TODO o código acima pelo código abaixo:





<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<b:else/>
<span class='date-header'><data:post.dateHeader/>
<script>document.write(lastDate);</script>
</span>
        </b:if>




1)            SALVE!
2)            COPIE TODO O CÓDIGO que você acabou de alterar e deverá:
3)            Salvá-lo no bloco de notas
4)            Apagar ele do seu template.
Volte ao modo “editar html” do seu template e procure por:





<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>



Após a localização cole ABAIXO do trecho o código que você copiou no bloco de notas.
Visualize, e se estiver tudo certo, salve novamente!

Após a modificação do código, você poderá aplicar estilos para a data. Procure pela tag ]]></b:skin>
E cole ACIMA dele, o código abaixo incluindo os trechos definindo os estilos que você deseja.




.date-header {
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento se quiser*/
padding: /*defina um espaçamento se quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/
}


0 comentários