Data do Blog Personalizada

Olá e boas vindas sempre!
Vou mostrar como deixar a data das postagens em formato de calendário. Assim:

1.Primeiro faça uma imagem para usar como plano de fundo da sua data. Se quiser, pode usar a imagem que eu uso, ou usá-la como base:
 
2.Agora, no seu blog, vá em Configurações, Idioma e Formatação, Formato da Data, e escolha a opção 09 março 2012.
 

3.Vamos ao HTML. Acesse o HTML do seu blog, marque "Expandir modelos de widgets" e procure por:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Você poderá encontrá-lo 2 vezes. Na segunda vez é o que importa (aperte as teclas CTRL+F para procurar o código acima, depois clique em próxima). Quando encontrar pela segunda vez, substitua essa linha por:
<div id='Data'>
<script>trocarData(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Data'>
<script>trocarData(&#39;&#39;);</script>
</div>

4.Procure por </head>, e acima disso, cole estes códigos:
<script type='text/javascript'>
//<![CDATA[
var DataCalendario;
function trocarData(d){
if (d == "") {
d = DataaCalendario;
}
var da = d.split(' ');
dia = "<strong class='data_dia'>"+da[0]+"</strong>";
mes = "<strong class='data_mes'>"+da[1].slice(0,3)+"</strong>";
ano = "<strong class='data_ano'>"+da[2]+"</strong>";

document.write(mes+dia+ano);
DataCalendario = d;
}
//]]>
</script>


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Data tipo calendario
----------------------------------------------- */
#Data {
background: transparent url(URL da imagem) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mes */
}

.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}

.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>


5.Personalize o código:
background: transparent url(URL da imagem) no-repeat;=Acrescente o endereço da imagem que vc irá usar como plano de fundo da data ou não acrescente nada para aparecer só o texto.
width:60px e height:60px= Altere os números de acordo com o tamanho da imagem de plano de fundo.
float: left= posição esquerda ou direita (right).
margin: 5px 2px 0 -70px= Altere -70px por 0px se quiser que a data apareça dentro da postagem ou altere -70px para outros números posicionando a data para mais perto ou mais longe das postagens.
Espero ter conseguido explicar direitinho como eu aprendi aqui (créditos).
Beijus.






Postar um comentário

18 Comentários

  1. Vlw :3

    Ownt, que bloguinho kawaii

    keionbuotaku.blogspot.com

    http://japaninrock.blogspot.com/

    ResponderExcluir
  2. Ah que lindo Roberta *-*
    Vc poderia fazer um dia, um post sobre como fazer essa Gadget flutuante de recadinhos e de como personaliza ele?
    Não quero dar trabalho, é um só um pedido T-T
    Kissus

    ResponderExcluir
  3. Fica muuito fofo!! *-*
    Sempre quis deixar a data assim, mais eu tenho um pouco de preguiça, haha' xD
    Amoo seu blog, é muuito kawaii <3
    Beijoos ~ Bibi

    harajukucriativa.tk

    ResponderExcluir
  4. Oiiie!
    Amei seu blog, é a coisa mais cute que vi *--*
    Peguei alguns tutos e coloquei os devidos créditos :]
    Bjos
    http://luka-megurine.blogspot.com

    ResponderExcluir
  5. Muito obrigada a todos!!!
    Fico feliz com a presença de cada um aqui!
    Sintam-se a vontade para usar e compartilhar o conteúdo daqui ok :3

    ResponderExcluir
  6. Sato-Chan, publiquei este tutorial aqui:
    http://reinokawaii.blogspot.com/2012/01/gadget-fofo-com-slide-verticalmapeando.html
    No caso do que uso atualmente, adicionei apenas um plano de fundo para a C-box, editei o tamanho de acordo com o tamanho da imagem, e o background transparente; depois adicionei o código da C-box na área do HTML ^^
    Sinta-se a vontade para perguntar sempre que houver alguma dúvida ok :3
    Beijus.

    ResponderExcluir
  7. Anônimo11 março

    Nossa muito obg fiz este tutorial muirtas vezes,mas so o seu funcionou!

    teenage-dreamblog.blogspot.com

    ResponderExcluir
  8. Quando eu tiver tempo vou deixar assim!Seus posts são incriveis e ajudam muitooo blogueiros hihi!bjss
    http://www.cotidianodeumabarbie.blogspot.com/

    ResponderExcluir
  9. Amei, o unico de tudo o que eu procurei (e forma muitos) que eu consegui *--* obrigaada!

    Mais uma coisa, como se coloca o dia em cima do mês, não estou conseguindo!

    Beijooos,
    gabi.viieira@hotmail.com

    ResponderExcluir
  10. :v:Amanda, nesse tutorial dessa postagem, o dia fica em destaque mesmo, o mês em cima.
    Esse que uso atualmente eu não sei te explicar como é feito, mas o consegui no candylland.net, site da Giza Veiga. É um código que ela disponibiliza para aplicar estilos em postagens e já veio com a data assim.
    Beijus e obrigada:cat:

    ResponderExcluir
  11. Amei esse tutorial!
    Eu estava procurando por ele a meses!
    Arigatou!
    Ah, já estou seguindo!
    Amei o blog!!!

    Kisses!

    ResponderExcluir
  12. Obrigada... deu certo!! Acho que é um dos únicos que da tudo certo..hehe... Fã do seu Blog!

    ResponderExcluir
  13. Foi muito difícil encontrar essa postagem, sugiro que vc coloque uma tag assim: (data do post em forma de calendário)... pois demorei 3 dias pra encontrar nas pesquisas... Bjsss

    ResponderExcluir
  14. gostei muito do totorial obrigado por me ajuda .

    ResponderExcluir
  15. Amo visitar esse blog, me dá paz em ver tantas coisinhas kawaii!!!
    Mas estou injuriada, procurei em todos os lugares, não só aqui mas pelo menos umas 18 páginas de busca do google algum tutorial que eu conseguisse modificar minha data no blog que estou fazendo, porém não achei nada, todos os códigos que usei, testes e retestei não funcionaram não sei se é pq meu template eu fiz pelo Artisteer...
    Estou usando muitas coisas daqui no meu blog, logo que conclui-lo darei os devidos créditos ok?
    Bjos =**

    ResponderExcluir
    Respostas
    1. Muito obrigada e me alegra muito sua presença ^^
      Talvez dê certo com o código mais recente que postei nos Tutoriais que mostra um outro jeito de fazer Data em Forma de Calendário.
      Obrigada uma vez mais e beijus ;3

      Excluir
  16. Muito Bom, já tentei milhares de vezes e só consegui no seu post!
    Brigada, bjus ;3

    ResponderExcluir
  17. Brigada adorei , seu blog é muito fofo adorei ele ..
    http://meeuumuunndoo.blogspot.com.br/

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up