21 de jul. de 2012

Navegação do blog com efeito degradê


Outro tuto... Aproveitando que hoje estou cheia de idéias (kkk), porque tem dia que, meu Deus, não tenho uma idéia de post! Agora vou ensinar vocês deixarem a navegação do blog com efeito degradê. Pra quem não sabe o que é navegação, é isso aqui:

                                           

Então, é bem simples, só prestar bastante atenção. Vamos ao tutorial:


Vá no HTML do seu blog e procure por #blog-pager { e cole o código abaixo encima 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;
}
 Agora é só você editar como quiser as cores, está tudo explicadinho no código.


                        

15 comentários:

  1. Nossa, muito bom! Ajudou muito no meu, só que o efeito, eu não gostei. Depende muito do gosto, né?

    Amo seus tutos, são sempre muito bem explicadinhos e muito legais. Beijocas!
    www.segredoirrevelado.blogspot.com

    ResponderExcluir
  2. *o* seus tutos são d+ . Me ajudaram muito mesmo! Muuiitoo Obrigado =3

    ResponderExcluir
    Respostas
    1. Oi Mirelle, que bom que te ajudei :D! Denada viu, beijos!

      Excluir
  3. Ok , eu sou meio lerda , em alguns não consegui , mais a maioria consegui ! GAAAAABI VOCÊ NÃO EXISTE MENINA !É muita perfeição nesse blog ><

    ResponderExcluir
    Respostas
    1. Oi Mandy, liga não, eu sou bem lerdinha tambpem :D! KKK' Brigado flor s2! Beijos!

      Excluir
  4. hey muito bom o tutorial tem como voce encinar como fazer layouts animados

    ResponderExcluir
  5. Nao consigo .-. dá erro e tals e to fazendo tudo certinho, uma coisa ou outra deu certo e mesmo assim foi nos outros tutos

    ResponderExcluir
    Respostas
    1. Oi querida, não sei oq pode está acontecendo no seu caso , pq eu fiz aqui e em outros blogs e deu certo! Tenta ai denovo e ver se dá certo :D Bjinhooos!

      Excluir
  6. eu não sei mexer no blog, graças aos seus tutos eles ficam lindos *-* Mas nao consegui, quando eu boto para procurar da 0de0 ;s

    ResponderExcluir
    Respostas
    1. Isso tbm acontecia comigo antes, mas consegui por acaso consegui resolver isso, vc clica primeiro dentro da caixa onde são os html e depois aperta o Ctrl + f . Espero ajudar!

      Excluir

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.