Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

3/12/2012

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:

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> )


créditos : Dicas Tumblr

Nenhum comentário:

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.