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:
Provavelmente você irá encontrar mais de um desse código. Substitua todos que encontrar por esse código:
Agora para finalizar, procure por ]]></b:skin> E acima disso, cole o código a seguir:
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 ^.^
4 comentários
Adorei! Tava procurando isso pra colocar no novo layout do Dois Jeitos de Ser. Valeu *_*
ResponderExcluirOie Day,que bom que gostou :) e que bom que eu pude ajudar *-*
ExcluirNa 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
ai que fofo ja tentei fazer isso no meu blog mais não consegui.
ResponderExcluirbjs
http://rayssade-souza.blogspot.com.br/
Oie Rah,sério flor?! :/ se quiser eu ajudo você a fazer viu ;)
ExcluirBjs ^.^
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