13 de jul. de 2015

Navegação personalizada com efeito hover degradê


Olá pessoal, hoje eu vou ensinar um tuto que eu sempre quis aprender, sempre procurava no Google mas não achava então se com você é a mesma coisa, isso acabou porque eu vou ensinar agorinha mesmo, é bem fácil:

Entre no HTML, aperte Ctrl+F e procure por #blog-pager { quando achar cole em baixo este código:
/* 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;}
Resultado

Edite apenas as partes que estão em negrito, como vocês estão vendo são créditos do Go Imagine, espero que tenham gostado, Tchaauu :)

2 comentários:

  1. Que legal, um blog cheio de tutoriais <3
    amei!!

    http://apequenaka.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que legal, fico muito feliz por saber bem-vinda ao TR :)

      Excluir

Copyright © 2014 | Design e C�digo: Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo