Personalizar os links do rodapé dos posts com efeito houver | Quero Dicas


Personalizar os links do rodapé dos posts com efeito houver

Personalizar os links do rodapé dos posts com efeito houver

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;
} 

 
Personalizar os links do rodapé dos posts com efeito houver

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 - AQUI

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. 
Beijinhos ♥ 
COMPARTILHE :  

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.