9 de outubro de 2012

Links de navegação com efeito hover degradê.

                Tumblr_m9hoptrtsl1rei1uro1_500_large

    Oi gente lindja, esse foi o pedido da nossa amiga Débora, um efeito bem legal nos links de navegação. Muito simples, é um efeito hover no fundo! Agora, chega de falar, vamos pro que interessa.

   Esse código eu aprendi no We Heart HTML {www} e agora, vamos aprende-lo.

  Vão em design, editar HTML, aperte CTRL+F e procurem por : #blog-pager {
  Após você achar essa tag, cole esse código abaixo acima da tag:

/* Navegação com efeito hover degradê - http://goimagines.blogspot.com.br */
#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:10px;
}
#blog-pager a:link, #blog-pager a:visited{
color: #ffffff; /* cor da fonte */
font-size: 16px; /* tamanho da fonte */
padding:5px;
background-color: #8BC2C9; /* cor do fundo */
-moz-border-radius:10px; /* bordas arredondas, apague se não quiser */
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#blog-pager a:hover{
color: #ffffff; /* cor da fonte hover*/
padding:5px;
background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */
background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */
background: -moz-linear-gradient(top, 
#BFCED5#8BC2C9);/* firefox3.6+ */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=
'#BFCED5', EndColorStr=' #8BC2C9');/* IE */
}
#blog-pager-newer-link {
float: left;
}#blog-pager-older-link {
float: right;}

  Onde está pink, vocês editem com a cor e o jeito que vocês quiserem.
  Depois de pronto, visualize, se tiver certo, salve! Espero que tenham gostado. ~Beijos

Obs: No próximo post, vocês preferem Background's ou Brushes ?

6 comentários:

  1. ✖ Muito utiu (◕‿◕, mais não vou presisar por enquanto mais ajuda muito :D

    fatosdaminhavidinha.blogspot.com ☏

    ResponderExcluir
  2. Adorei o tuto,acho que vou usar no meu novo lay.

    Beijos
    Doce Capuccino

    ResponderExcluir
  3. Obrigada viu Ayla ^^ mais n vou usar agr o tutorial...E poste brushes , q eu posto os Background's...
    Bjoossss

    ResponderExcluir
  4. Certo, Background's cuida você Débora, deixa os Brushes cmg. ><
    Beijos.

    ResponderExcluir
  5. tenho uma dúvida , como assim abaixo acima da tag , sempre que faço isso não da certo

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)