Navegação personalizada com efeito hover degradê

7 de jul de 2012

Cute-i-was-born-a-champion-muffins-paris-white-favim.com-456054_large
Pra combinar com o frio que tá fazendo aqui no RS: uma imagem que tem tudo a ver com o inverno!
Já tinham me pedido esse tuto, e cá estou eu pra posta-lo! Nesse tuto você vai aprender a colocar fundo colorido nos links "postagens recentes" "ínicio" e "postagens antigas", igual aqui no GI!
Aprendi esse tutorial no Perfeitinha, com a Thais e fiz algumas alterações -como o degradê- :3

O resultado será semelhante à esse:


Entre no seu html e procure pela tag  #blog-pager { (ela fica dentro da tag /* Posts) feito isso adicione o código abaixo acima dessa 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;
}

Acho que não tem muito o que explicar, uma vez que tem as instruções no código, só quanto ao degradê, altere as cores conforme quiser, trabalhando com duas cores de preferência (no código foi usado #8BC2C9 e #BFCED5)

É isso, kissus :*

43 comentários:

  1. Amei! Estava precisando deste tutorial, é fácil de fazer, não precisamos de nenhuma imagem :) Já estou usando no blog :3

    Beijinhos,Maitê
    pinkcatsflashpug.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Também adoro quando não precisa usar nenhuma imagem, fica bem mais prático!

      Excluir
  2. Arrasou no tutorial Anny :3 Ele é bem prático e fácil de fazer, acabei de ver o efeito hover no Perfeitinha mas com o degradê fica bem mais bonito. Vou usar no próximo layout do World Cutest *-*

    Anna,
    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  3. Vé se pode , ela é uma anja omg!
    smileretro.blogspot.com

    ResponderExcluir
  4. OMG, Você mora no RS? AAAAH! Eu também moro, que cidade? Cara, que incrível isso kk'
    Vou fazer no próximo design, com certeza! Beijos :*

    ResponderExcluir
    Respostas
    1. Siiim, sou de Sapucaia do Sul, pertinho de POA, Esteio, Canoas e São Leopoldo! Que demais mesmo!

      Excluir
    2. Meu pai mora em Canoas!

      Excluir
  5. Amei o tutorial,ficou lindo *--*
    http://themudancas.tk/

    ResponderExcluir
  6. Adorei o tutorial, fica lindo :)

    Beijos,
    http://placestyle.blogspot.com.br/

    ResponderExcluir
  7. Caramba, que lindo! Érr.. Desculpe incomodar, eu sou a Luuh do Teen Style que atualmente foi rackeado! Sim, sim u.u Estou muito abalada.. Perdi 668 seguidores, que lutei e sonhei muuito para conquistar! Imagine vc com esses seguidores ter que perder tudo de repente e começar do zero.. Pois é, ta sendo muito difícil, pode me ajudar lá no meu novo blog? Obg, já estou seguindo

    Bye♥bye
    # Raaaawr >> princessplush-oficial.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial, vou tentar fazer no meu blog.
    http://i-teenbr.net.tc

    ResponderExcluir
  9. Amei o tutorial,que bom que você postou,rsrs.
    Beijos *-*
    bolodemorango.blogspot.com.br

    ResponderExcluir
  10. Adorei o tuturial, é muito criativo :D

    http://beleza-moda-maria.blogspot.com

    http://palavrassuperfulas.blogspot.com

    Beijinhos, Maria**

    ResponderExcluir
  11. Nossa, eu sempre quis saber como você tinha feito esse efeito em degradê dos links. Já tinha visto esse tutorial no Perfeitinha, mas não tão bonitinho assim. Fiz lá no meu blog e adorei o resultado! Ótimo o tutorial. Adorei Anny. Ah, eu não sabia que você morava no RS, também sou daqui e confesso que os frios de ultimamente estão chocando todos! Haha <3 Um beijo.
    the-zombie-attack.blogspot.com

    ResponderExcluir
    Respostas
    1. Nossa, sério que você também é daqui? Que demais! Em que cidade você mora? Verdade, tá muuuito frio :3

      Excluir
    2. Eu moro em Porto Alegre mesmo, na capital do estado. E você flor, onde moras?

      Excluir
  12. Já to seguindo, amei o blog, e eu to com um blog novo fiz hoje, já é o segundo que faço, fiz o primeiro tava divulgando em menos de 10 minutos já com 7 seguidores, e o que acontece alguém excluiu meu blog, fiquei triste mais tenho que levar no humor, depois ri da situação e não desisti e fiz outro kk garota de sorte eu né? visita o novo blog? se der segue de volta?
    Sou Assim, Problem?

    ResponderExcluir
  13. ótimo tutorial adorei *-*
    http://day-ddream.blogspot.com.br

    ResponderExcluir
  14. Adorei o tutorial muito bom mesmo !Pode ter certeza que eu vou usar!

    Ta rolando um concurso lá no Elegantíssimas valendo DVD, layouts, afiliação, divulgação e muito mais!
    Se quiser conferir:
    http://anajuliavelasque.blogspot.com.br/2012/07/sorteio-em-parceria.html

    ResponderExcluir
  15. Ótimo tuto *o*
    Flor, eu gostaria de saber uma coisa!
    É porque eu estou fazendo um lay, & eu coloquei os comentário, tags & quem postou na parte superior, abaixo do título do post. Só que não sei como tirá-los da parte de baixo!
    Será que poderia postar um tuto for me ? :3
    Agradeceria demais.
    http://alanfelipej.blogspot.com.br/

    ResponderExcluir
  16. Selinho para você aqui ---->http://unendingdream-oficial.blogspot.com.br/2012/07/recebi-um-selinho.html

    ResponderExcluir
  17. Nossa Anny! Lindoooooooooooooooooooooooooooo de mais o tuto! Talvez eu use! Aqui visita meu blog novo? O outro foi hackeiado.

    http://chocolaate-pie.blogspot.com.br/

    ResponderExcluir
  18. Ta rolando um mini game lá no VSI com prêmio uma entrevista , não vai ficar de fora né

    http://omeucantiinhomaisfeliz.blogspot.com.br/2012/07/meta-atingidacursor-no-psmini-game.html

    ResponderExcluir
  19. Ola, Bom gostei muito do menu do seu blog sera que você poderia postar o tutorial dele?
    Agradeço deste já.
    http://blogger-boysattitudes.blogspot.com.br/

    ResponderExcluir
  20. Ameeio tuto, muito útil.
    Seu blog tá lindo.
    Você poderia fazer mais tutoriais?
    Seguindo, ok?
    Mil Beijos!'

    www.frescurinhadoce.blogspot.com

    ResponderExcluir
  21. gostei muito do tutorial, o efeito é bem bonito!
    bjs
    http://blogtrashrock.blogspot.com.br/

    ResponderExcluir
  22. Amei o tutorial, muito bom! bjks

    vnmpoficial.blogspot.com.br

    ResponderExcluir
  23. AAwn , super util o tutorial ! Vou ver se consigo colocar o meu ! Adorei aqui, estou seguindo. Passa lá ? http://desbloqueiodesentimentos.blogspot.com.br/

    ResponderExcluir
  24. Muito útil adorei o tutu, um beijo Emilia.
    Sua seguidora, :3
    http://coffemilia.blogspot.com.br/

    ResponderExcluir
  25. Amei! Já Estou Usando em meu Blogger! Tenho um Convite esperando sua Resposta com mto Carinho: Aceita ser Minha Parceira {Blog Stefani Pink}

    http://blogstefanipink.blogspot.com.br/

    Pense Por Favor! Imagine rsrsrs Beijoos!

    ResponderExcluir
  26. Oi, deixando avisado que dei créditos pra você no meu blog pela ajuda com seus tutoriais.
    Adoro seu blog! :D

    ResponderExcluir
  27. Ameeeeeeeei , fiz no meu ( paraserperfeita.blogspot.com.br ) ! Eu quero saber , como fez esse comentários lindo dms , e qual é o nome desse fonte dos títulos ?

    ResponderExcluir
  28. Adorei o tutorial, estava mesmo procurando por ele!
    Adorei o seu blog, já coloquei ele nos favoritos e os créditos do tutorial no blog.

    http://blog-onedream.blogspot.com.br/

    ResponderExcluir
  29. Ooi Anny, Tudo bom ? Eu já sigo seu blog faz tempo, e eu só queria dar uma assadinha aqui, pra dizer que to usando esse seu tuto, ok ? Eu ja coloquei os créditos la no meu blog ;] Kiss (Seu blog é magnífico) .

    http://she-dream-with-paradise.blogspot.com.br/

    ResponderExcluir
  30. Amei o Tuto, parabéns!
    Estava em uma procura maluca por ele, obrigada ;3

    http://menina-crazy-blog.blogspot.com.br/

    ResponderExcluir
  31. Fica muito fofo! E a cor que tá no código combina com o lay. Gostei *-*

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  32. Amei! É bem fácil de se fazer, e ficou lindo! Ah, você tem algum tutorial dessa personalização nos comentários? Eu achei tão fofo, e é difícil achar um bonito assim. Bom, mesmo assim, obrigado se puder responder.

    ResponderExcluir
  33. Aaaaaah \Õ/ Finalmente consegui !!
    Nenhum dos tutoriais que eu achei dava certo no meu blog :/ Só esse que deu ♥---♥

    http://princesasdebatomrosa.blogspot.com.br/

    ResponderExcluir
  34. Pq quando eu coloco um codigo o negocio diz que nao tem? me ajudem :(

    ResponderExcluir
  35. Amei! Era tudo o que eu precisava, ficou lindo!

    ResponderExcluir
  36. Muito, muito útil.

    http://reinaemnos.blogspot.com.br/

    ResponderExcluir
  37. Eu queria tirar o fundo, deixando apenas os links escritos, como faço?

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.