Eae Galera hoje 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 em "Layout" -> "Editar HTML" e procure por:
]]></b:skin>
Agora cole algum dos códigos abaixo acima dessa tag.
/* 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 -->
}
/* ---------------- 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 -->
}
::-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 -->
}
0 comentários:
Postar um comentário