Barras de rolagem personalizadas para seu blog

Dias atrás eu ensinei como alterar a cor da barra de rolagem do blog, disponibilizei o cógigo e ensinei como colocar no blog. Mas desta vez, irei disponibilizar alguns códigos que vão deixar seu blog mais criativo com uma barra de rolagem personalizada.

Para colocar em seu blog, apenas entre no Editar HTML do mesmo e procure por:

]]></b:skin> 

Agora cole uns dos códigos abaixo acima dessa tag, em seguida salve. Lembrando que só testei no Google Chrome.

Estilo 1

/* Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 25px; <!-- largura da barra de rolagem -->
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 45%, #000000 50%, #ffffff 52%);
background: -webkit-gradient(linear, left top, right top, color-stop(45%,#ffffff), color-stop(50%,#000000), color-stop(52%,#ffffff));
background: -webkit-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: -o-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: -ms-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}
::-webkit-scrollbar-thumb:vertical {
height: 91px;
width:21px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/11.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}

Estilo 2

/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
<!-- largura da barra de rolagem -->
height: 5px;
width: 33px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
border-right: 1px solid #DCAF0C;
}
::-webkit-scrollbar-thumb:vertical {
height: 19px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/21.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}

Estilo 3

::-webkit-scrollbar {
<!-- largura da barra de rolagem -->
height: 5px;
width: 50px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
border-right: 1px solid #1E5799;
}
::-webkit-scrollbar-thumb:vertical {
height: 35px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/31.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}