7/19/2013

Atendendo Pedido:Personalizando a data do post =)


Olá seus lindos *-*
Hoje eu vim atender um pedido que me foi feito por comentário da  Rayane Santos. Aqui está:
Quero lhe pedir desculpas Rayane pela demora,mas foi porque eu estava longe do blog,pois estava fazendo um novo layout para ele =/ enfim... vamos logo ao que interessa: A Ray me pediu para fazer um tutorial de como personalizar a data do blog igual a minha, antiga,aqui esta o modelo: 

Agora vamos ao tutorial? 

Primeiro você deverão ir até o painel do seu blog,clicar em configuração-->Idioma e formatação, e deixar a data do post neste formato (igual ao da imagem):




Feito isso,agora vá  até modelo--> Editar Html--> Dê ctrl dentro do html e procure pela tag: 
.main-inner h2.date-header { e apague tudo o que estiver abaixo dela até acima de .footer-inner .widget h2, e no lugar do código que você apagou,você deverá colocar este: 

font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('http://4.bp.blogspot.com/-MQCT_yetEMk/UP1iLjdYFWI/AAAAAAAAClg/_iYLABcdhUM/s1600/dataaahh.png');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'NOME DA FONTE', sans-serif;
font-size: 18px;
width: 80px;/* largura */
height: 80px;/* altura */
float:right;
margin-left: -55px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
No código já vem explicando tudo o que é necessário. Só irei acrescentar aqui algumas coisas: Onde tem escrito 'NOME DA FONTE' Coloque o nome da fonte que você preferir (não retire os apóstrofos), e onde tem escrito: background: url('http://4.bp.blogspot.com/-MQCT_yetEMk/UP1iLjdYFWI/AAAAAAAAClg/_iYLABcdhUM/s1600/dataaahh.png') vocês deverão colocar a imagem que ficará por trás da data,não consegui encontrar mais imagens =/ Porque o blog onde peguei esse tuto o retirou e não sei porque =C
Mas quem quiser pode deixar o background da data como esta,assim ficará igual ao do preview que mostrei no começo do post =).

Espero que tenham gostado do Tutorial, e consigam faze-lo. Qualquer dúvida me perguntem! Terei o prazer em ajudar. =) 
Até mais... Fiquem com Deus :*

2 comentários:

  1. Adorei, outro pedido:
    Eu amei os seus afiliados, mostra como se faz para as fotos ficarem redondinhas!
    http://cupcakevirtual2012.blogspot.com.br/
    Beijos

    ResponderExcluir

Olá,Obrigada por vim comentar,fico muito feliz com seu comentário,mas antes tem algumas regrinhas que vocês precisam saber:
- Não use palavrões ou ofensas para com os outros seguidores,você não precisa se rebaixar tanto
- Tem blog? Deixa o endereço que eu sigo,se estiver seguindo aqui também.
-Por enquanto estamos sem vagas para afiliados.

Obrigada!