Barra de rolagem personalizada (redondinha) - Atualizado!

30 de ago. de 2011


Gente eu já vi muitos tutoriais ensinando a personalizar a barra de rolagem mas ainda não havia achado um de como deixar ela "redondinha" e com fundo como a do Cherry Bomb sabe? Mas dei mais uma procurada e achei no tumblr I love themes só tive que mudar o local de onde colar o código, afinal, onde eu achei o tuto era um tumblr e os códigos são diferentes e tal. O código tem os créditos mas não vamos tirar por questão de respeito ao trabalho dos outros ok? Vamos lá então:

Primeiramente abra seu blog, vá em Design, depois em Editar HTML. De Ctrl + F para abrir a caixinha de busca e procure pela seguinte tag:
]]></b:skin>
Logo ACIMA cole o seguinte código:

/********* Rolagem Por QuinzeParaMeiaNoite.tumblr.com *********/
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background-image: url('URL DA IMAGEM');
background-color:#fff; height:100px; 
-webkit-border-radius: 2ex; 
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em; 
-webkit-box-shadow:0 0 1em #eee;}

/*** Rolagem da Horizontal da Página***/

::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');
::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');
background-color:#fff; height:10px; 
-webkit-border-radius: 2ex;
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;
-webkit-box-shadow:0 0 1em #eee; }


/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {height:10px; width:20px; background-color:#fff;-webkit-box-shadow:0 0 1em #eee;}


/********* Fim da Rolagem, não retire os créditos *********/

Atualização: Como não ficou muito claro o que é barra fixa e barra móvel (logo abaixo) eu fiz uma imagem ilustrando:

                                          Bem mais claro agora não?

Agora vamos entender o código para podermos personaliza-lo:

URL DA IMAGEM - Se você quiser por uma imagem de fundo troque essa frase pela URL da sua imagem. 


#fff - É a cor da barra que rola. Caso você não queira por uma imagem de fundo, mude para a cor que você quiser consultando essa tabela.


#fff - É a cor da barra que NÃO rola.


#eee - É a cor da sombra das caixas. Mude para as cores desejadas.


width:20px - É a largura da barra. Mude o 20 para o valor desejado.


- Se você quiser colocar um fundo na parte fixa, como no Cherry Bomb troque essa tag abaixo (que se encontra na mesma linha de width:20px)
background-color:#fff
 Por essa aqui:
background-image: url('URL DA SUA IMAGEM AQUI'); 
Bom, era isso espero que tenham entendido e gostado.

28 comentários:

  1. Conheço esse tuto pelo Ecleticus, mas o seu é ótimo também! Tem post novo no PF, comenta?

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  2. Hmmmm, vou fingir que entendi ok?
    Barra fixa, móvel... Enfim, que bom que gostou do tuto!

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  3. Pois é, não deu 'liga' o tuto comigo também, daí eu me virei e consegui personalizar sozinha!
    E o tutorial em breve postarei! É que tem a surpresa por aí...

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  4. Oi flor !
    Desculpa se eu demorei pra por seu link lá, eu tinha esquecido, kk , foi mal mesmo. Mais agora já tá lá ok ? Beijos,
    Ah ! obg pela dica s2
    http://desbloqueiodesentimentos.blogspot.com

    ResponderExcluir
  5. Agora sim eu entendi! Nossa, seu blog tem só 84 seguidores? Deveria ter mais. É bem melhor que muitos por aí que tem mais de 200, 300 seguidores e são bem desorganizados. Adoro aqui. E realmente, a Ludurana decepcionou e fez você gastar dinheiro pensando que era crackle. Acho que tem defeito só nos nossos!

    Beijos,
    Place Fame | Extras | Maratona de Tutoriais | Twitter

    ResponderExcluir
  6. Adorei o Tutorial, usei ele no meu blog. Amei seu blog muito lindo!!!
    Se tiver um tempinho passa no meu: http://blogcandydreams.blogspot.com

    P.S.: Meu bloga não é lá essas coisas!

    ResponderExcluir
  7. Não funcionou no meu. Modifiquei tudo só que a barra continuou normal. Eu não tenho muita sorte com isso, a maioria dos tutoriais não funciona comigo :(

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  8. No me naum funcionou mas tudo bem....ainda estou tentando....

    ResponderExcluir
  9. Não consegui , mas tudo bem. Não é totalmente necessário, né xD ?

    ResponderExcluir
  10. é incrivel como nada dessas coisas de html funcionam pra mim ¬¬ ja ate desisti porque... u.u' mas mesmo assim amei o tutorial! se tivesse dado certo entçao ein \o hahah
    beijoos

    http://abouteverything-cm.blogspot.com/

    ResponderExcluir
  11. Amor eu mudei meu modelo e tentei esse tutorial de novo e não consegui =/ nao foi de jeito nenhum =/ mas mesmo assim obrigada pela ajuda!! beijos

    ResponderExcluir
  12. Num fufaaaaaaa DDDDDDDDD:

    ResponderExcluir
  13. blog super lindo e maravilhoso *-* acho muito linda essas barrinhas personalizadas e queria colocar no meu blog também, tentei mais não funcionou DD:
    seguindo <33 ' bjoooos ;**

    ResponderExcluir
  14. Fiz isso no meu blog e ficou muito fofo ! Acabei de começa a usar o blogger e já estou amando !

    http://girls-pretty05.blogspot.com

    OBS : O blog é lindo

    ResponderExcluir
    Respostas
    1. Aneim , eu não consegui !
      Queria deixar o meu blog fofo , mas não dei conta mesmo ! :'((
      Tenho que colar isso tudo mesmo . ?

      Excluir
  15. Adorei sei blog, e seus tutorias vao-me ajudar muito a melhorar meu blog.

    Tou seguindo...
    segue de volta se gostar,claro!
    http://p-liveorexist.blogspot.pt/

    ResponderExcluir
  16. Oiee
    adoro seu blog
    mais esse tutorial n funciona no meu blog ;(
    voc pode me ajuda??
    bjoss

    ResponderExcluir
  17. Oiiie, o tuto não funcionou no meu blog !

    Ameii o seu blog, seguindo segue de volta ?

    xoxoxo Helo~~

    Meigasecutes.blogspot.com

    ResponderExcluir
  18. Por incrível que pareça eu consegui fazer estou amando os tutoriais!

    ResponderExcluir
  19. Porque vc não faz essa barra noseublog Anny!
    Eu fiz no meu:
    Perfectnaiveforever.blogspot.com

    ResponderExcluir
  20. Liindo ameei....

    to seguindo, segui de volta?

    ResponderExcluir
  21. Oi boa tarde.Passei para deixar o endereço deste site pra você:www.vtubetools.com/code.hph
    Ele tem tres modelos de para personalizar videos do youtube e colocar em blogs e sites.
    Só não consegui colocar os códigos:São tres;na área de minhas postagem.Mas ei diminue o video e a moldura e coloquei no meu javascript.
    Neste site você pode colocar o fundo que vc quizer,até uma foto sua.Se você conseguir colocar os códigos ou apenas um deles no HTML da postagem me dá um toque,por favor.
    Meu blog :anadirpedro.blogspot.com.br
    Meu e-mail:anadir.pedro@yahoo.com.br
    Visite meu blog,é um pouco rebocadinho,tipo blog de vó mesmo.Um dia vou aprender organizar direitinho.
    TCHAU .e mto obrigada.

    ResponderExcluir
  22. alguém me ajuda não consegui fazer :( ..alguém faz pra mimm

    ResponderExcluir
  23. Guria me salvouuuuuu!! Mesmo sendo um tutorial tão simples, faz tanto tempo que não mexo com essas coisas que eu tinha até esquecido. Obrigada
    Sabrina Neri
    http://saiacurtasp.blogspot.com.br/

    ResponderExcluir
  24. Não está funcionando :(
    Será que você pode me ajudar?

    www.plataformadevidro.blogspot.com.br

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.