Carta para talvez Ex-melhor amiga

Leia mais

Quem é você Alasca?

Leia mais

Carta para o futuro namorado

Leia mais

Ciumes

Leia mais

Tutorial + Barra de Rolagem com Efeito Hover

    Oiie meus babies, uhuuul depois de 2 dias de viagem cheguei no meu destino! [de São Paulo para Sergipe]
    Mas, enfim, vamos deixar os papos aleatórios de lado e vamos ao que nos interessa!
    Hoje eu trouxe um tutorial que eu acho bem legal, que é a barra de rolagem com efeito hover! O resultado é super fofo *u* Eu achei esse tuto num blog que eu amo, que é o A última princesa, os créditos são todos à ela <3


Tutorial:

Vá no seu HTML, tecle ctrl f e procure por:
]]></b:skin> 

E logo abaixo dessa tag, cole o seguinte código:
html::-webkit-scrollbar {width:22; height:auto;background: #D3D3D3;}html::-webkit-scrollbar-corner { background: #D3D3D3;}html::-webkit-scrollbar-button:vertical {height:1px;display:block;}html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}html::-webkit-scrollbar-thumb:vertical {background: #DDA0DD;border: 1px solid  #D3D3D3;border-right:none;-webkit-border-radius: 8px;}html::-webkit-scrollbar-thumb:horizontal {background: #DDA0DD;border: 1px solid #D3D3D3;border-bottom;}html::-webkit-scrollbar-thumb  {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);}html::-webkit-scrollbar-thumb:hover {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);border: 1px solid  #A2A2A2;}html::-webkit-scrollbar-track-piece {background: none;}html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}

Oque está em negrito é a cor do fundo sem o mouse por cima, o que está em sublinhado a cor da barra, e oque está em itálico é a imagem hover, se você quiser substituir por uma cor, só retirar o -image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp) por : #códigodacor e o que está em roxo é a borda da barrinha e a do fundo. Bom, visualize, se estiver tudo certo, salve ^^

E ai gostaram do tutorial? Espero que sim, kissus ;*

6 comentários:

  1. ótimo tutorial,só não faço no meu blog porque eu acho que não fica muito bonito :D
    Nos outros blogs ficam bonitos,no meu eu já não acho.

    cherrycandy-viih.blogspot.com

    ResponderExcluir
  2. Deve ficar bem bonito.
    http://magic--teens.blogspot.com.br/

    ResponderExcluir
  3. Amei o tutorial!
    Voce ganhou um selinho no meu blog,passa la para pegar!
    BJS

    --> coversofgirls.blogspot.com

    ResponderExcluir
  4. Otimo tutorial. Adoreoi. Tudo bem explicadinho.

    Beijos.

    www.mundodajulia13.blogspot.com

    ResponderExcluir
  5. Adorei o tuto ♥
    bjinhos
    Participe do primeiro concurso do blog que esta rolando! clique aqui <---

    ResponderExcluir
  6. ótimo tutorial! talvez use no lay atual do meu blog! *-*
    Beijos ~> Magic Touch

    ResponderExcluir