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:
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:
#FFF : Coloque o código da cor do fundo da barra de rolagem.                                                                              
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> )
4º Passo) Comentar aqui se deu certo

0 Comentários