Tutorial: Barra de Rolagem Colorida.




Olá queridos, tudo bom? Hoje trouxe um tutorial bem simples e fofinho para vocês. Sabe a barra de rolagem? Que tal da um toque todo especial nela? Vamos conferir.
Lembrando que você deve fazer um backup do seu template antes de começar a modificar o html, apenas por precaução.
É super simples gente, vocês podem modificar as cores, abaixo segue um exemplo de como vai ficar, usando as cores, Rosa e Preto. (Para visualizar melhor, clique na imagem)


Vocês podem tirar também o arredondado e deixar eles quadradinhas, para isso é muito simples. Basta você ir no Painel do Blogger, e clicar em Modelo, logo em seguida Editar HTML, após isso clique em ctrl+f ou f3 e procure pelo código: ]]></*b:skin> (Apenas retire o * pois o blogger não estava deixando que eu digitasse sem ele).
Em cima desse código, cole:



/*** 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*/
}

Se você não quiser as bordas arredondadas, basta apagar as partes cor de rosa. E para personalizar as cores, basta você ir trocando os códigos pela cor desejada utilizando a Tabela de Cores HTML.
Como assim Kéziah? Percebam que ao lado de cada código temos uma especificação como essa *Cor da barrinha que se move* basta vocês substituírem o #ff0f72 pela cor de seu agrado. E ir visualizando até ficar do seu jeitinho. Depois disso basta salvar e pronto.

Espero que todos tenham entendido!
Qualquer dúvida deixem nos comentários.
Esse foi mais um tutorial que eu aprendi no site dicasparablogs.com.
Aguardem os próximos!

9 comentários:

  1. Ótimo tuto! Só não coloco lá no blog porque acho que o blog já tá bem enfeitado... hahahaha Adorei amiga! Os tutos aqui estão muito legais!

    beijos,

    Marcelle
    bestherapy.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial :D

    Só não vou colocar no blog porque eu vou fazer umas modificações daqui uns dias inclusive essa então vou deixar para depois mais adorei :D Posta tutorial de mouse quando a gente arrasta o mouse aparece corações eu quero colocar !

    euvivolendo.blogspot.com ( comenta lá :D )

    ResponderExcluir
  3. \o/ eu me atrapalho sempre com essas coisas rsrsrs mas adoro esses tutoriasi facinhos *_*

    Bjinhos

    ResponderExcluir
  4. Ai amiga, eu sou péssima quando se trata de mexer no HTML do blog.
    Da última vez que fui tentar, inclusive com um tutorial teu, mexi em alguma coisa que agora não sei consertar o problema.
    Quando eu coloco em layout para acrescentar widgest, não aparece nada. Não estou conseguindo fazer nada.
    Eu desisto de mexer nesse troço.

    bjus

    terradecarol.blogspot.com

    ResponderExcluir
  5. Kéziah, mais um tutorial maravilhoso!!!
    Beijos para você.
    http://marlicarmenescritora.blogspot.com.br

    ResponderExcluir
  6. Nossa, admiro muito quem sabe mexer nessas coisas rs. E a paciência em ensinar também!
    Parabéns =D

    www.resenhasealgomais.com.br

    ResponderExcluir
  7. Muito lindo, amei seu layout !

    Se gostar, segue?
    the-charming-place.blogspot.com

    ResponderExcluir
  8. O meu modelo ñ tem o:]]>
    oq q eu faço?
    ja tentei colar lá mais ñ funciona!:(

    ResponderExcluir
  9. ruim pq some as setas...tem como as setas não sumir?

    ResponderExcluir

Sua opinião é de extrema importância.
Sinta-se a vontade para deixar sua sugestão, crítica, dúvida, opinião, etc.
Mas lembre-se, seja educado com seus comentários e dispense palavras de baixo calão, pornografias e qualquer outro tipo de preconceito.
Deixe o link do seu blog ou qualquer outro tipo de contato para que eu possa retribuir sua visita.

Obrigada pela visita, volte sempre que puder.
Beijos!

Fonte: http://princesa-descolada-myla.blogspot.com/2013/03/paginacao-numerada.html#ixzz2j39CpByO