Personalizar barra de rolagem ( scrollbar )

 

Esse tutorial é de como personalizar a barra de rolagem do seu blog, ele funciona no Google Crhome e no Mozila Firefo, ele não pega no Internet Explorer(Não me diga??? ¬¬").Para entender o codigo, olhe esse print com as partes da barrinha(scrollbar)


Cole o codigo antes de ]]></b:skin>

/*Esse é o codigo*/
Barrinha da parte de cima(a parte que se move)
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /* fundooo */
border: 1px solid #bgh; /*Bordaa(se não quiser retire)*/
height:50px; /*Tamanho da barra */
border-radius: 20px; /* borda arredondada, se não quiser apague... */
-moz-border-radius: 20px; /* borda arredondada, se não quiser apague... */
-webkit-border-radius: 20px; /* borda arredondada, se não quiser apague... */
}
Barrinha da parte de baixo(a parte que se move)
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px; /*tamanho */
border-radius: 20px; /* borda arredondada, se não quiser apague... */
-moz-border-radius: 20px; /* borda arredondada, se não quiser apague... */
-webkit-border-radius: 20px; /* borda arredondada, se não quiser apague... */
display: none; /* trecho que "apaga" a barrinha do fundo, eu acho feia, mas se quiser deixar apague o treixo */
 }
Barrinha que não se move
::-webkit-scrollbar {
height:10px; /*tamanho */
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*/
}
/* fim do codigo */

Aqui algumas Scollbars para você se inspirar, lembre de combinar a scrollbar com o background(fundo) do blog







































Essa deixou a borda arredondada, e ficou muito bom