13 janeiro 2013

Navegação Personalizada com Hover

| |

Oiie lindos e lindas!
Antes de começar a postagem, queria falar que se vocês querem algum tutorial é só pedir na Ask ali do lado. Os tutoriais podem ser em imagem, tipo, em PhotoShop, ou PhotoFiltre ou PhotoScape; e podem ser HTML. Eu vou ficar feliz em ajudar vocês ^-^

Perceberam que o blog está de "roupa nova"? Então, eu resolvi trocar pois o da Candice não ficou como eu queria...

Vamos ao tutorial... Se forem até o fim da página vão ver a navegação personalizada. Quando passa o mouse em cima a cor e a sombra mudam. Eu peguei no blog Go Imagine e personalizei, colocando a sombra ^.^



Vamos ao tutorial ^-^

No HTML do seu blog, aperte F3 e procure #blog-pager { Vai achar algo mais ou menos assim:


#blog-pager {
  font-size: 140%;
}

Apague e no lugar cole:

#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: 17px; /* Tamanho da fonte */
padding: 5px;
background-color: #A4BFBC; /* Cor do fundo normal */
box-shadow: inset 0 0 20px #6D8C8C, 0 0 4px #ccc;
border-radius: 10px; /* Bordas arredondadas normais */
}
#blog-pager a:hover{
color: #ffffff; /* Cor da fonte hover*/
padding: 5px;
background: #6D8C8C; /* Cor do fundo hover */
border-radius: 10px; /* Bordas arredondas ao passar o mouse */
box-shadow: inset 0 0 20px #3C5559, 0 0 4px #ccc;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
20px #6D8C8C e 20px #3C5559 são o tamanho e a cor da sombra. Bem, não há muito mais para explicar, né?

Caso usem ou repassem, deem os devidos créditos! Beijos ;♥

8 comentários:

  1. Babei com o novo layout aqui :P
    Essa navegação é diva, haha'
    Cake Of Tutorials

    ResponderExcluir
  2. O novo layout fico muito divo !
    Ótimo tutorial bem fácil e você explicou tudo direitinho ;D

    Beijos

    ResponderExcluir
  3. Perfeito esse novo layout!!

    Amiga, pode por favor curtir a página do blog no face que está novinha em folha? Agradeço desde já.

    http://facebook.com/blogfabulouss

    Bjoo

    ResponderExcluir
  4. A muito bom o tutorial! amei mesmo!

    ResponderExcluir
  5. É lindo seu blog :D

    Quer seguir o meu que eu sigo o seu?

    danyelleoliveiraa.blogspot.com.br/

    ResponderExcluir
  6. Muito bom seu blog novo , incrível mesmo, quer afiliação ?
    http://candymoree.blogspot.com.br/

    ResponderExcluir
  7. Seu layout é super lindo!

    Te indiquei uma tag! Espero que vc goste!

    Smiles and kisses
    http://garotaespeerta.blogspot.com.br/2013/01/tag-saiba-11-coisas-sobre-mim.html

    ResponderExcluir
  8. Woount, linda obrigada pela ajuda!!
    Lindo seu bloguinho!
    Estou seguindo!
    Poderia retribuir?
    Vices of Life

    ResponderExcluir

« »