Close

Data do blog com fundo personalizada


Resultado desse tutorial !
1 - Vá em configurações - Idioma e formatação - formato da data - e marque a  opção 15 fevereiro 2013
3- Vá no HTML do seu blog e marque a caixinha - Expandir modelos de widgets - e procure por :
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Vai ter 2 códigos iguais, mas o 2º código é o que você precisa achar.

4 - Ao achar o 2º código no seu HMTL, substitua ele por esse código abaixo
<div id='Data'> <script>trocarData(&#39;<data:post.dateHeader/>&#39;);</script> </div> <b:else/> <div id='Data'> <script>trocarData(&#39;&#39;);</script> </div>

5 - Agora procure por </head> e acima dele cole os códigos abaixo
<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>

Altere (URL DA IMAGEM ), pela imagem de fundo de sua preferência.

Algumas imagens que eu fiz pra vocês ! 




width:60px e height:60px - Faça a alteração 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 caso queira 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.


By at
Arquivado em:
loading..

9 comentários

  1. # - Brendaa16 de fevereiro de 2013 às 06:32

    Nossa, ótimo esse Tutorial, achei bem fofo o resultado. Nossa, quando tempo que eu não passo por aqui, é o tempo que não deixa ^^ ... mais vou passar mais tempo aqui, visitando sempre que eu posso. Tanto, que o BDN foi para o meu Blogroll.

    xoxo♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir
  2. Anônimo16 de fevereiro de 2013 às 08:52

    Legal, adorei a dica *-*
    *-* to seguindo, e vim te convidar a seguir o meu também ?
    Ahhhhhhh e vai ter sorteio na fan page, pagina do blog acho que irei lançar hoje ainda, só falta alguns detalhes, o premio sera uma paleta de 177 cores + blush: http://www.facebook.com/DaayKrechMakeup , curti lá... será um prazer te ter como amiga.
    e meu canal: http://www.youtube.com/user/fascinacaodemulher
    Twitter: @DaayKrech
    será um prazer em te ter como amiga :)
    beijos e fique com Deus :@

    http://fascinacaodemulher.blogspot.com.br

    ResponderExcluir
  3. Natalia Sousa16 de fevereiro de 2013 às 09:04

    Adoooro sorteio . já tô lá !

    ResponderExcluir
  4. Carol Martins16 de fevereiro de 2013 às 10:48

    Adorei o tutorial, fica bem lido e da um toque diferente pro blog, talvez eu vou fazer isso lá no meu.
    Adorei também o blog, muito lindo, já estou seguindo (:
    http://blogpurepoison.blogspot.com.br/

    ResponderExcluir
  5. Blog da Nah16 de fevereiro de 2013 às 13:04

    Eu faço de outro jeito, tem um tutorial no meu blog.

    http://nataliamedice.blogspot.com.br/2013/02/tutorial-data-personalizada.html

    ResponderExcluir
  6. MEL!16 de fevereiro de 2013 às 15:33

    Natalia eu não tou com muito tempo no blog eu tenho 12 anos o nome do meu blog é my perfect dream vc faz um layout pra min por favoooooooor *-* meu nome e melissa esse e meuu blog eu n tenho ele por muito tempo rssrsr obgrigada

    http://umaprincesaa.blogspot.com.br/

    ResponderExcluir
  7. Letícia Ester17 de fevereiro de 2013 às 08:32

    Super amor este tutorial, salvei aqui nos favoritos, vou usar ele para fazer o design do blog da minha irmã kk'

    Seguindo o blog (;
    http://itimaginer.blogspot.com.br/

    ResponderExcluir
  8. Juhh Rabelo17 de fevereiro de 2013 às 09:34

    ótimo tutorial, vou ver ser ponho ele em prático no meu blog. Já deixei como favorito!! hehehe

    http://juhhrabelo.blogspot.com.br/

    ResponderExcluir
  9. Pâm Possani17 de fevereiro de 2013 às 10:38

    CARA, tava precisand aprendendo um difernete pro proximo look, ja achei um ,pelo jeito,né? :o
    adorei o tutorial,ficou lindo, alias :D
    obrigada!
    e eu adorei seu blog :3
    Um beeijo!
    Pâm
    http://interruptedreamer.blogspot.com.br/

    ResponderExcluir

Assinar: Postar comentários (Atom)