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

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

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


2 comentários:

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

    ResponderExcluir
  2. 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

    ResponderExcluir

Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

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.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir