Blogueiras de primeira viagem #6

| |


Hoje trago um tutorial,estou repostando da página Cherry Bomb,então os créditos são totais delas.
***Créditos totais a Cherry Bomb***


Data personalizada

Vai ficar assim:

Coloque em Editar Html>Ctrl+F e procure por </head>
Logo abaixo disso, cole esse código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
< /script>
Aperte Ctrl+F novamente e procure pela primeira linha deste código:
<b:if cond='data:post.dateHeader'>
< h2 class='date-header'><data:post.dateHeader/></h2>
< /b:if>

Logo abaixo do trecho que você procurou, cole isso:
<a expr:name='data:post.id'/>
Deve ficar assim:















Aperte Ctrl+F novamente e procure pela linha abaixo:
<h2 class='date-header'><data:post.dateHeader/></h2>

Provavelmente você irá encontrar mais de um desse código. Substitua todos que encontrar por esse código:
 <div id='fecha'>
< script>remplaza_fecha('<data:post.dateHeader/>');</script>
< /div>

Agora para finalizar, procure por  ]]></b:skin> E acima disso, cole o código a seguir:

#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/

float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}
É nesse último código que você vai editar o estilo da data, colocar imagem de fundo e alterar a fonte.
Se você quiser que a data fique para fora da área de postagens, você deve aumentar os valores de "margin", que estão destacados em rosa. Se sua sidebar ficar no lado direito, aumente o valor de margin-left, sem apagar o tracinho (-) até que fique onde você quer. Agora se sua sidebar fica á esquerda, aumente o valor de margin-right.

Espero que tenham gostado,qualquer dúvida é só falar nos comentários ok.
Beijos doces ^.^

Comente com o Facebook:

4 comentários:

  1. Adorei! Tava procurando isso pra colocar no novo layout do Dois Jeitos de Ser. Valeu *_*

    ResponderExcluir
    Respostas
    1. Oie Day,que bom que gostou :) e que bom que eu pude ajudar *-*
      Na aba Créditos aqui do blog tem as dicas de sites em que eu achei os melhores tutoriais para personalizar o blog,depois dá uma passadinha lá viu.
      Beijos ^.^ e obrigada pela visita <3

      Excluir
  2. ai que fofo ja tentei fazer isso no meu blog mais não consegui.
    bjs
    http://rayssade-souza.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie Rah,sério flor?! :/ se quiser eu ajudo você a fazer viu ;)
      Bjs ^.^

      Excluir

Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar

Related Posts Plugin for WordPress, Blogger...
Tecnologia do Blogger
Edição e Design: Jennyfer Aguillar || Todos os direitos reservados © 2016