Como mudar a barra de rolagem no Tumblr
Aprenda a mudar a barra de rolagem do seu tumblr e com isso deixe-o muito mais bonito e estiloso. Abaixo duas imagens, a primeira mostrando a barra de rolagem comum, e a segunda como ela ficará depois de personalizá-la.
Antes:
Antes:
Depois:
Nota: Essa barra de rolagem é só exemplo, você poderá deixá-la do jeito que quiser.
Nota(2): Esse tutorial só funciona no Google Chrome
1º Passo) Copie o código abaixo:
html::-webkit-scrollbar {width:22; height:auto;background: #FFF;}
html::-webkit-scrollbar-corner { background: #FFF;}
html::-webkit-scrollbar-button:vertical {height:1px;display:block;}
html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}
html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM);border: 1px solid #A2A2A2;border-right:none;-webkit-border-radius: 8px;}html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM);border: 1px solid #A2A2A2;border-bottom;}
html::-webkit-scrollbar-thumb {background-image: url(LINK DA IMAGEM );}
html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM);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;}
2º Passo) Editar o código. No lugar de:
LINK DA IMAGEM : Coloque o link da imagem que irá substituir o botão de rolagem. O ideal é que a imagem seja um background ou uma pattern.
Para ver os códigos das cores acesse esse link: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
3º Passo) Copie o código já editado, vá no tumblr >> customize >> Advanced e cole o código no box de Custom Css ( caso não de certo dessa forma cole o código imediatamente antes de </style> )
créditos : Dicas Tumblr
créditos : Dicas Tumblr
Comentários
Postar um comentário
Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.