14 de out. de 2012

Personalizando o rodapé das postagens


Oi pessoal!! Hoje vou ensinar a personalizar o rodapé das postagens igual ao do template da Miku (na verdade eu uso esse tutorial em quase todos os meus Templates). O tutorial é do blog Jackie Dream, então todos os créditos a ela.


Vá no seu HTML, aperte CTRL+F e procure por:

.post-footer {

Se você nunca tiver mexido nessa área do template, vai aparecer assim:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
Substitua todo o código acima por este:

.post-footer {
border-top:1px dotted #000000;
font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}

Instalando a fonte!

Cole o código abaixo acima de: </head>
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>

 Entendendo o código!


border-top:1px dotted #000000; -> borda de cima. 
font-family: 'Cookie', cursive; -> fonte  do "postado por".
font-size: 16px; -> tamanho da fonte

color:#FF1493; -> cor dos marcadores
background-color: #FFFF00; -> cor de fundo dos marcadores


color:#FFFF00; -> cor do texto quando passa o mouse
text-decoration:none; 
background-color:#FF1493; -> cor do fundo quando passa o mouse



color: #ccc; -> cor do texto do número de comentários
background-color: #FFFF00; -> cor do fundo do número de comentários




Eu não uso imagem no fundo, pois acho muito difícil colocar todas as medidas certas para ficar tudo certinho. Mas se você quiser colocar uma imagem no fundo, visite a postagem original e aprenda.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

4 comentários:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!