Personalizar barra de rolagem - 2 modelos


Olá fofinhas e fofinhos ^_^ Tudo ok? Bom eu sei que o post de hoje está saindo meio mega tarde, mas enfim eu já estou com sono ( eu acordei muito cedo hoje ) e tenho que terminar esse post logo, o tutorial é super simples, vou ensinar a personalizar a barra de rolagem do seu blog de duas formas, a primeira é a barra de rolagem colorida com fundo personalizado, a segunda é a quadradinha colorida, vamos aprender? Clique em Mais Informações para ver o tutorial.


  Essa é a barra de rolagem redonda com o fundo personalizado

 ♥ Vá em Modelo > Editar HTML -> Ctrl + F e procure por ]]></b:skin> 
♥ E acima dele cole esse código: 

 ::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;height:50px;
border: 2px solid #fff;box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }:
::-webkit-scrollbar {height:10px; width:20px; background: url(url do fundo da barra de rolagem) repeat;box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}   

♥ Em  #e7b3c2 você muda a cor da barrinha 
♥ Em #fff você muda a cor da borda da barrinha 
♥ Em url do fundo da barra de rolagem você coloca o url da do fundo que vocêc quer na barra de rolagem.


 Agora essa é a colorida com fundo colorido.

♥ Vá em Modelo > Editar HTML -> Ctrl + F e procure por ]]></b:skin> 
♥ E acima dele cole esse código: 

 {
scrollbar-face-color:#9B30FF;
scrollbar-highlight-color:#9B30FF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9B30FF;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#000000;
}
::-webkit-scrollbar {width: 12px; height: 4px; background: #000000; }
::-webkit-scrollbar-thumb { background: #9B30FF; }   


♥ Em #9B30FF é a barra de rolagem você pode mudar a cor 
♥ Em #000000 é o fundo da barra de rolagem você pode mudar a cor 
♥ aqui tem uma tabela de cores para usar basta copiar o código HTML e coloca - lo onde você quer mudar a cor: Clique Aqui Para ir Até a Tabela de Cores

Créditos: ♥♥
Guardado em: