
Oi amores, hoje eu vim ensinar pra você como fazer sua barra de rolagem personalizada e ainda com efeito hover ! Eu não vi esse tutorial em nenhum blog, então esse tutorial pra mim ainda é exclusivo. Não sei se vocês já sabem esse tutorial, mas se souberem ok, pois isso pra mim é novidade kk, desculpem por eu não postar ontem, estava meio que ocupada. Voltando o tutorial, para ver como sua barra de rolagem vai ficar, só ir no meu blog de encomendas, para ir no gs encomendas só clicar aqui, e passe o mouse sore a barra de rolagem, não aparecer uma imagem? Então, é isso que eu vou ensinar ^^
Vá em Design> Editar HTML e procure por:
]]></b:skin>
E logo acima cole:
html::-webkit-scrollbar {width:22; height:auto;background: #D3D3D3;}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. Bom, espero que tenham entendido o tutorial. Até a próxima ^^
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;}
[b]Esqueci[/b]
ResponderExcluiresqueci
ResponderExcluir