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


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!

2 comentários

Clique e deixe seu comentários
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
avatar
admin


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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