6 de set de 2012

Tutorial : Personalizar footer do post


    Ooooi meninas , tudo bem com vocês? Eu tou bem , então hojee eu vou postar um tuto bem legal aqui para vocês , de como mudar o footer do post do blog
                              como mostra na imagem abaixo , o meu é assim oo 
então quer saber como eu deixei ele assim ? Vocês ja sabem né , clique em leia mais para continuar lendo 


                             Vá no seu htlm , aperte F3 e procure por 
                                                  .post-footer {

                                          Você vai achar algo assim:

    .post-footer { 
 margin: .5em 0;
  line-height: 1.6;
}

Apague todo o código que você encontro desde : .post-footer ate } 
     e no lugar coloque isso :

.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat;
font-family: 'Comic Sans MS', 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;
}

O código ja diz tudo você vai fazer as alterações que vocês quiserem .. Tabela de cores :www
Agora, vamos personalizar a imagem de fundo:


Para acertar as medidas das imagens você precisa usar o google chrome (rs), no lugar do post clique com o botão direito e selecione ''inspecionar elementos.''

Depois é só criar a imagem e colocar no lugar de "URL DA SUA IMAGEM AQUI "
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat;

Então meninas é isso , se vocês usarem um post com esse tuto não se esqueça dos créditos ok '

2 comentários:

  1. O resultado é super fofo, dá um 'up' no blog... Ótimo tuto *-*
    Beijos !
    ofocodabeleza.blogspot.com.br/

    ResponderExcluir