Cala Boca, Isa!: Barra de rolagem colorida no blogger

28 de fev de 2015

Barra de rolagem colorida no blogger

Muita gente já me perguntou como eu fiz essa barra de rolagem colorida no NSEB. É um tutorial muito facil e exige um conhecimento basico de HTML. Ele é personalizável, ou seja, voc pode colocar as cores que quiser e o tamanho que quiser tambem. Continue lendo e veja como faz e qual o codigo.



Antes de tudo, queria agradecer ao Designer e HTML pelo código, vocs são diwos. Agora, ao tutorial:

1-Abra o seu blog e vá em 'Modelo' depois em 'Editar html'

2-Aperte ctrl+f e pesquise ']]><' e ANTES dele cole esse codigo:

/*** 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*/}/
*** 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*/}/
*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no fundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
O código já é auto-explicativo. Voc só precisa mudar as cores de acordo com o seu template. Para conseguir os codigos das cores, clique aqui.

Espero que gostem do tutorial. Bjoos

Recadinhos:
10 Recadinhos:

10 comentários:

  1. Oi Isaahh :3
    Passando aqui pra te avisar que já te coloquei nos meus afiliados!!! Não conhecia seu blog ainda! Gostei dele!
    Esse tutorial é mt útil. É um detalhe simples mas que faz a diferença no blog.
    Beijos!

    https://enquantoachuvadissolveacidade.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada! Ainda bem que gostou :D Tambem acho que esse simples detalhe faça toda a diferença... Ainda estou montando meus afiliados, mas quando terminar, vou colocar voc tb ;)
      Bjos

      Excluir
  2. Conheço esse tutorial, mas deixei de usar. Muito simples, né?

    Beijo! | Blog Entretanto

    ResponderExcluir
    Respostas
    1. Realmente mt simples mas fica tão bonitinho se voc souber combinar com seu template...
      Bjo

      Excluir
  3. Que legal amei esse tutorial bem simples :D vou tentar fazer

    amei seu blog é muito lindinho já seguindo aqui flor, esse é meu cantinho espero sua visitinha um beijão :D
    http://blogdameeninamooca.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. O tutorial é muito simples mesmo.
      Ainda bem que gostou do blog :D
      Vou dar uma passadinha no seu blog sim!

      Bjo

      Excluir
  4. Eu ainda tenho que praticar com esses códigos HTML rsrs as vezes me enrolo, ou me perco nos passos, mas tá bem explicado, gostei da dica, vou tentar!
    Abraços!
    http://coisasdeumleitor.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ainda bem que gostou... Depois de um tempo voc pega a pratica e faz rapidinho :D haha
      Bjos

      Excluir
  5. Gostei!
    Facil, simples e delicado. Vou tentar colocar no meu.

    www.estilo-malu.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Alem de facil, simples e delicado, é super fofo e dá um resultado incrivel...
      Bjos

      Excluir