Heey teens, como estão? Eu estou muito feliz, sabe por quê? Porque alcancei mais uma meta, a meta mais desejada: 60 seguidores. Muito obrigada à todos os seguidores, que são tão atenciosos com o CL, só tenho que agradecer à vocês e pra comemorar trouxe um tutorial bem legal: Leia mais com efeito hover! Bem lega, eu acho melhor do que ficar criando imagens para cada layout que você faz e esse tutorial é bem útil pra quem muda muito de layout. Vamos lá:
1°. Vá no HTML do seu blog
2°. Dê um Ctrl + F e procure por ]]></b:skin>
3°. Cole acima dessa tag o seguinte código:
.jump-link{float: right; /* no lado direito ou esquero, pode mudar para left */background-color: #FF80FF; /* cor do fundo */padding-left: 2px; /* espaçamento esquerda */padding-right: 2px; /* espaçamento direita */padding-bottom: 5px; /* espaçamento embaixo */padding-top: 5px; /* espaçamento emcima */font-size: 10pt; /* tamanho da fonte */color: #000000; /* cor da fonte */text-align: center; /* alinhamento do texto */width: 100px; /* largura do fundo */opacity: 0.7; /* opacidade */-webkit-transition-duration: 1.00s; /* duração da volta do hover */border-radius: 20px;}
.jump-link:hover{background-color: #CFD9F6; /* cor do fundo com o mouse em cima */padding-left: 2px; /* espaçamento esquerda */padding-right: 2px; /* espaçamento direita */padding-bottom: 5px; /* espaçamento embaixo */padding-top: 5px; /* espaçamento em cima */color: #000000; /* cor da fonte */width: 100px; /*largura do fundo com o mouse em cima */opacity: 1.0; /* opacidade */-webkit-transition-duration: 1.00s; /* duração do hover */text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */}
As instruções estão todas no código, é só você modificar como quiser. Beijinhos e até o próximo post!!
Nenhum comentário:
Postar um comentário