Personalizar os links do rodapé das postagens com efeito houver - Post Footer | Quero Dicas


Personalizar os links do rodapé das postagens com efeito houver - Post Footer


Hoje eu vou ensinar para vocês, como personalizar os links do rodapé das postagens, os Post Footer! Esta customização tem o efeito Hover.
Não entendeu o que falei?
Os links que falo são aqueles que ficam embaixo das postagens em uma tarja, onde se pode colocar, exemplo: Marcadores, Comentários, etc.


Veja na imagem


Agora que você já sabe do que eu estou falando, vamos ao tutorial. Claro! Você poderá trocar as cores dos links, suas bordas, fonte, etc.

TUTORIAL

1 - Acesse o seu blog, vá em Modelo e o HTML do template. Procure por:


.post-footer { 

 

Você encontrará um código mais ou menos assim:
.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;
}

2 - Logo abaixo de } cole o código ↓ Veja se está tudo bem e salve. Pronto!

.post-footer a{
color:#000000; /*COR DO LINK */
background-color: #FF69B4; /*COR DA CAIXA */
text-decoration:bold; /*está em negrito, se não quizer coloque none */
font-family:'georgia'; /*estilo de fonte */
padding: 2px 6px;
border-radius: 7px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
-webkit-transition: color 0.5s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
.post-footer a:hover{
background-color: #DDA0DD; /*COR DA CAIXA HOVER*/
color: #9400D3; /*COR DO LINK HOVER */
text-decoration:bold; /*---- bordas arredondadas, apague a linha se não quiser ----*/
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
} 

 


Agora é só personalizar os locais que eu escrevi ao lado. Caso você mexa em outro código que não indiquei, é por sua conta e risco.

Tabela de cores - Flextool

Caso você não queira com efeito houver, é só tirar o código:

.post-footer a:hover{
background-color:
color: #9400D3;
text-decoration:bold;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

Espero que tenham gostado. Deixe seus comentário. Beijinhos ♥ 
Me Contrate!

Comentários
2 Comentários

2 comentários

avatar
admin
segunda-feira, 09 novembro, 2015 ×

Esse tutorial seria muito útil, se desse para copiar o código, mas como não é possível...

Resposta
avatar
admin
segunda-feira, 09 novembro, 2015 ×

Rayssa.
Felizmente, dá para copiar todos os códigos que disponibilizo dentro da caixa de seleção.
É só selecionar com o mouse o texto e copiar com o botão direto ou selecione todo o código e tecle Ctrl + C do teclado

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.