Personalize a Data do Blog

beauty, black and white, cute, eyes

Olá amores ^^ vim mostrar pra vocês mais um tutorial. Ensinarei como fazer essa data que estou usando neste modelo agora, o Powe Pink Rock, que é em forma de "calendário". Esse desenvolvi por mim mesma, afinal já tinha tentado várias formas, mas em vão. E é facílimo! Clique em leia mais.

ATENÇÃO: Salve uma cópia do seu modelo de layout caso o tutorial não tenha funcionado. Este tutorial foi testado e usado no Modelo Travel do Blogger, não se sabe se funcionará nos outros modelos.


OBJETIVO

O objetivo é esta data que vocês podem ver:



TUTORIAL

Modelo > Editar HTML

Procure por: .main-inner h2.date-header

Após achar essa tag, apague tudo o que está abaixo dela e no lugar, cole:

.main-inner h2.date-header {
background: #ff0066; /* Cor de Fundo */
float: left; /* Lado onde flutua (Left - esquerda, Right - Direita)  */
width: 60px; /* Largura */
height: 60px; /* Altura */
overflow: hidden; /* Não altere */
text-align: center; /* Texto (Center - Centralizado, Right - Direita, Left - Esquerda) */
font-size: 15px; /* Fonte do Texto */
color: #ffff00; /* Cor do Texto */
margin-bottom: -65px; /* Margem abaixo */
margin-left: 5px; /* Margem Esquerda */
padding: 2px 2px 0px 2px; /* Ajustes de Posição */
}


ATENÇÃO: Se você quiser o modelo idêntico ao da foto, você terá de alterar também os ajustes do título. para isso, em h3.post-title { cole a medida aproximada da largura da sua data, por exemplo, no caso acima é 60px. Então se for essa a sua medida escolhida, abaixo de h3.post-tilte { isso: margin-left: 80px; Ou seja, 20px a mais da sua data.

Certo? Edite de forma correta e salve. Perceba que você já pode ver que funcionou bem, porém, o Blogger, por padrão, quando postamos várias coisas em um dia, exibe somente a data no post mais recente. Vamos alterar isso.

Modelo > Editar HTML > Expandir Modelos Widgets

Procure por: <b:if cond='data:post.dateHeader'>.

Deve ser parecido com isto (se não, são apenas algumas diferenças):

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

Você vai achar dois códigos semelhantes ao acima. No lugar dos dois, cole isto:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
Salve e visualize. Espero que tenham gostado ^^  Até a próxima ;*