06 abril 2013

Tutorial para o seu blog: barra de rolagem colorida

Hey meninas, hoje trouxe um tutorial que vocês leitoras que tem blog vão gostar.. Hehee  Lembrando que vi esse tutorial no blog Cherry Bomb em! 
Hoje vocês vão aprender como colocar aquela barrinha de rolagem colorida, parecida com a que tem aqui no blog. Olha só como fica:


No painel do Blogger, vá em Desing, editar HTML, Ctrl+F ou F3 e pesquise por: ]]></b:skin> . Cole o código abaixo antes de ' ]]></b:skin> ' que você encontrou.
/*** 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*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** 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*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
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ó alterar as cores conforme indicado, visualizar, e se estiver tudo ok, Salve. Ah, e si não quiser os cantos arredondados, apague as partes em cinza.
Beijos! 

Nenhum comentário:

Postar um comentário

Hey lindas ..
Obrigada pelo comentário, fico muito feliz. 
Deixe o link do seu blog, para que eu possa retribuir a visita.
Sigo todos de volta.
Beijoos.

Related Posts Plugin for WordPress, Blogger...