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.

4 comentários:

  1. Esse tuto é bem fácil de fazer u.u só não faço no meu blog porque ele já tá todo arrumadinho...

    Neoreul Saranghae

    ResponderExcluir
  2. Fica lindo é é MUITO fácil!

    Beijos || cupcakeofshine.blogspot.com

    ResponderExcluir

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!