24 de jul. de 2012

60 seguidores + Leia mais com efeito hover


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

                       

3 comentários:

  1. Ameiiiii muito lindo esse efeito e seu blog também é lindo :)

    ResponderExcluir
  2. oi ensina como você fez essa personalização nos comentários neste balão de comentários?

    beijos

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.