19/01/2013

Tutorial: Barra de Rolagem Personalizada

Oii gente.
Hoje trouxe um tutorial bem legal que eu vi no Coisas de Meninas.
Aprenda como personalizar a barra de rolagem do blogger.
Vá em Design, Editar HTML, aperte Ctrl F e procure por ]]></b:skin>
Antes dele cole esse código:

/*** Rolagem da Vertical da Página ***/

::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

Clique aqui para ir à tabela de cores. É só você copiar o nome da cor que você quer e colar lá :)
Aí está tudo explicado. Se você não quiser a borda arredondada, apague a parte em itálico.

Espero que seja útil para vocês!

Beijos e Boa Noite.

Nenhum comentário:

Postar um comentário

Comente o que quiser, contando que siga essas regras:
♥ Não fale coisas que possam ofender alguém
♥ Comente sobre o post primeiro, e depois deixe o seu recado.
♥ Os comentários que cotenham "Seguindo, segue de volta" serão ignorados.
♥ Seja feliz :)