15 de fev de 2014

Data do blog personalizada

Olá pessoal, trouxe mais um tutorial de personalização a pedido da amiga Sthefany.
Vamos aprender a personalizar a data da postagem do blog?
Trouxe dois exemplos, espero que gostem:


Para este modelo vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:

Clique na imagem para vê-la em seu tamanho natural.
Este é o formato da data que vai aparecer em seu blog.

Salve, depois vá ao html de seu blog, aperte as teclas ctrl f do seu teclado
para aparecer a caixinha de pesquisa e procure por:

.main-inner h2.date-header { font: $(date.font);
  color: $(date.text.color);
}

Quando encontrar substitua por:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}

Observações:
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/

- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.

O segundo exemplo é a data do blog dentro de um balão.

no seu HTML pressione as teclas CTRL+F e pesquise por:

 <b:includable id='post' var='post'>

Quando encontrar coloque este código logo abaixo dele:

<span class='post-comment-link-arriba' style='background: url(http://i.imgur.com/lfGb2.jpg) no-repeat top right; width:90px; height:80px; text-align:center; float:right;padding-top:19px'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

                     Ficando assim:

Para trocar a imagem do balão: http://i.imgur.com/lfGb2.jpg
Se trocar a imagem do balão não esqueça de verificar a altura Widht e o tamanho Height do balão,
pois também precisam ser trocados os valores.

Deixo o link de alguns balões fofos Crazy Bomby 

19 comentários :

  1. Esse tutorial é bem útil, ajuda bastante e fica muito fofo hover ><

    ~Bye
    Explosion of Paradise

    ResponderExcluir
  2. Obrigada me ajudou *--* eu pesquisei mais ninguém ensinava valeu <33
    http://mysweeet-world.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Beatriz, fico feliz por ter ajudado.♥ Bye

      Excluir
  3. como vc coloca a data do seu blog assim fofa eu já vi em muitos blogs assim,faz tutorial??

    ResponderExcluir
  4. Me ajudou muito, ficou bem fofo! obrigada ♥

    ResponderExcluir
  5. Linda, eu não consegui encontrar os códigos, vc sabe o porquê?

    ResponderExcluir
    Respostas
    1. Ingrid, no html de seu blog aperte as teclas ctrl f do seu teclado
      para aparecer a caixinha de pesquisa, quando esta aparecer vc
      copia e cola o código desejado e depois dê enter no teclado do
      computador que será direcionada ao código.

      Excluir
  6. Poxa já fiz a pesquisa, mas não acha nada no html :/

    ResponderExcluir
  7. Olá, eu queria muito modificar a data mais infelizmente não acho > .main-inner h2.date-header { font: $(date.font);
    color: $(date.text.color);
    }

    oque pode ser?

    ResponderExcluir
    Respostas
    1. Felipe, o seu layout é o janela de imagem.
      Procure por:
      .date-header span {
      color: $(date.header.color);
      }

      Este código fica em posts

      Excluir
    2. Ficou lindo, mt obrigada!
      http://blogcarolinarosa.blogspot.com.br/

      Excluir
    3. Carolina, fico feliz por ter ajudado.

      Excluir
  8. Oieeee... Estou há tempos procurando algo para mudar minha data e não tinha conseguido! Até que encontrei este post =)
    Simples e muito útil!!

    Super obrigada e gostaria de agradecer tb a visita no meu blog =D

    Beijos

    ResponderExcluir
    Respostas
    1. Letícia, fico feliz por ter ajudado.
      Beijos

      Excluir
  9. Eu não estou conseguindo deixar redondo, coloco a numeração, ja alterei varias vezes,mas nada.Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Susany, você seguiu todos os passos do tutorial?

      Configurações > Formatação > Formato da data, fez os ajustes?

      Tente outra vez, este modelo de data foi testado.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo