Hooy Gente a pedido de uma leitora 
vou ensinar como personalizar o rodapé do post igual ao meu, vejam:
vou ensinar como personalizar o rodapé do post igual ao meu, vejam:
O tutorial original é este aqui (www). Eu personalizei as cores, fontes e o grande truque é a imagem base que eu coloquei no lugar do Background-color 
(ou seja a cor do fundo) e o espaço dos comentários utilizei este truque aqui (www). Pra conferir o tutorial completo clique em Leia mais 
(ou seja a cor do fundo) e o espaço dos comentários utilizei este truque aqui (www). Pra conferir o tutorial completo clique em Leia mais 
Vá no seu HTML (use ctrl + f pra facilitar a busca) e procure por:
.post-footer {
Se você nunca tiver mexido nessa área do template ele irá aparecer acompanhado pelo seguinte código:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
Substitua todo o código acima por este:
.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat;
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;
}
Pra fonte funcionar corretamente primeiro você precisa instalar ela no template entenda mais lendo este post (www).
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'/>
Personalizando a imagem de fundo!
Agora você só precisa criar uma imagem que fique no fundo, assim como eu fiz, exemplo:
(só pra que usa o google chrome, baby) Pra acertar as medidas vá na área que fica o rodapé do seu template e aperte o Button direito do mouse e selecione a opção ''inspecionar elemento''
Agora que você sabe a medida certa é só criar uma imagem e colar a url dela no local indicado de vermelho (não apague os tracinhos do lado) : background-image:url('URL DA SUA IMAGEM AQUI');
Visualize se estiver tudo certo salve ;D
0 Comentários