Data dentro de Circulo ao lado do titulo da postagem no blogger (Nova Interface)

Oi meninas hoje eu trouxe mais um tutorial para vocês blogueiras lindas que gostam de arriscar criar seus próprios layouts... gosto bastante de procurar essas coisinhas que deixam nosso blog super diferenciado e bem organizado, lembre-se que que blogs organizados atraem mais leitores, amigos, visitas, parcerias e muitas outras formas de reconhecimento.Os créditos desse tutorial vão para a Alana do Go Imagine, que é um blog bem legal com vários tutoriais para seus bloguitos, e eu aprendi essa data com ela e aos poucos fui aprendendo a mudar algumas coisas para ficar no meu estilo, ou no estilo dos blogs que vocês me pedem para fazer (só entrar em contato, This is free!)
Antes de tudo salve uma cópia do seu modelo caso aconteça algum erro 

1º Você deve mudar o formato de data e hora no seu blog para Dia, Mês e Ano Configurações > Idioma e Formatação > Formato da Data o formato a escolher é o penúltimo da lista, 09 maio 2014 (claro que no sia em que você estiver vai estar outra data)  
2º Procure por .main-inner h2.date-header { dentro de <b:skin><]]></b:skin> que vai ser a primeira seta a ser aberta dentro do Html na nova interface
Apague todo o código antes de } e cole o código a seguir:

.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:13px;/** tamanho da fonte **/
color: #000000!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 apague se não quiser **/
background: #FEC7E6; /** altere a cor do fundo **/
}


Se você quiser a data quadradinha e com borda pontilhada como a minha aqui no blog acrescente 
outline: 1px dashed #FFFFFF; em cima da /** Cor da fonte**/
e apague -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda apague se não quiser **/
Tudo que está entre /** **/ é personalizável nesse código, cuidado ao modificar se não souber o que está fazendo, você pode trocar o fundo da data e a cor da fonte com base nessa tabela de cores aqui Espero que tenham gostado e que eu tenha ajudado.
Testado no modelo Simples por min e no Travel pela AlanaAprenda a fazer modelo houver > aqui Créditos Go Imagine
Data dentro de Circulo ao lado do titulo da postagem no blogger (Nova Interface) Data dentro de Circulo ao lado do titulo da postagem no blogger (Nova Interface) Reviewed by Eu Vaidosa on 9.5.14 Rating: 5

17 comentários:

  1. Gostei bastande do post e das dicas :)
    Visite o meu blog <3
    http://rainbowllandia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. brigada pelo carinho minha linda s2 visito sim :)

      Excluir
  2. Adoro esse tipo de post! Sempre dá pra aprender mais né!?

    Beijos
    www.heyealaysa.com

    ResponderExcluir
  3. Opaaaa dicas para blogs, amooo, já andei bisbilhotando o Go Imagine tbm hehehehe.
    Bjinhos. 💋

    •••► Blog - http://casamentosedetalhes.blogspot.com.br
    www.luzesdeparis.com.br

    ResponderExcluir
    Respostas
    1. :) sempre tem algo bom por lá s2 bjo

      Excluir
  4. Adorei, amo essas dicas, são preciosas, beijos
    @angellribeiroo

    http://www.modaimagem.com.br/2014/05/evento-motorola-anuncia-moto-music-on.html

    ResponderExcluir
  5. Olá!!
    que tutorial mais legal!! gostei!! =)
    Estou te seguindo!!
    Beijos;*

    www.harumiholanda.com

    ResponderExcluir
    Respostas
    1. obrigada pelo carinho minha linda :)

      Excluir
  6. Ai que massa Dani *-* eu nem teto mexer pra não fazer caquinha kkkkk já pensou o_O
    Muito 10 essas dicas, eu adoro fussar mas tenho um pouco de receio, vai que..... rsrs'

    Beijinhus gatona, tenha uma boa tarde ;)
    Luh

    http://luanaflordemulher.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Amore eu te recomendo que você crie um blog de testes para testar tudo antes de colocar no seu próprio blog é só fazer um backup do modelo e colocar lá assim você trabalha em cima do mesmo html e não estraga seu próprio blog ;) bjoo

      Excluir
    2. Amore eu te recomendo que você crie um blog de testes para testar tudo antes de colocar no seu próprio blog é só fazer um backup do modelo e colocar lá assim você trabalha em cima do mesmo html e não estraga seu próprio blog ;) bjoo

      Excluir
  7. Que legal, eu sou terrível para essas coisas, mas vou começar a arriscar rs. Respondi o seu e-mail sobre o dia da blogueira, espero que você perdoe a minha demora.
    Beijos

    http://diadespa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. que isso minha linda ! estou esperando sua postagem para colocar aqui simplesmente s2

      Excluir
  8. Não achei nenhuma linha com esse código .main inner h2 ...

    ResponderExcluir
    Respostas
    1. lucas tenta procurar pelo gadget disponível na nova interface :D

      Excluir