23 setembro 2014

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 ♥ 

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

Amigos do Blog



Agregadores