Tutorial: Barra de Rolagem Colorida


     Olá meninas! Hoje vocês vão aprender a personalizar a barra de rolagem. Todos os blog vem com aquela cinza sem graça, com esse tuto, vocês vão dar uma alegrada nela, sem falar que deixa seu design mais profissional. 





    Vamos lá? Vá no Menu > Modelo e abra seu HTML. Se aparecer algum aviso, clique em prosseguir. Dê ctrl + f e procure por ]]></b:skin>. Acima desse código, cole:

/*** 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*/}
/*** 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*/}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
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*/
}

Agora é só fazer as modificações necessárias. Lembrando que o código acima retirei lá do Cherry Bomb!

Beijos!




Nenhum comentário:

Postar um comentário

Hey! Que bom que você passou por aqui! Deixe a sua opinião sobre o post! Ah...não esqueça que comentários ofensivos ou então "Seguindo, segue de volta?" serão ignorados.