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:#fffPor essa aqui:
background-image: url('URL DA SUA IMAGEM AQUI');Bom, era isso espero que tenham entendido e gostado.
Conheço esse tuto pelo Ecleticus, mas o seu é ótimo também! Tem post novo no PF, comenta?
ResponderExcluirBeijos, Emily
Place Fame | Extras | Twitter
Hmmmm, vou fingir que entendi ok?
ResponderExcluirBarra fixa, móvel... Enfim, que bom que gostou do tuto!
Beijos, Emily
Place Fame | Extras | Twitter
Pois é, não deu 'liga' o tuto comigo também, daí eu me virei e consegui personalizar sozinha!
ResponderExcluirE o tutorial em breve postarei! É que tem a surpresa por aí...
Beijos, Emily
Place Fame | Extras | Twitter
Oi flor !
ResponderExcluirDesculpa 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
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!
ResponderExcluirBeijos,
Place Fame | Extras | Maratona de Tutoriais | Twitter
Adorei o Tutorial, usei ele no meu blog. Amei seu blog muito lindo!!!
ResponderExcluirSe tiver um tempinho passa no meu: http://blogcandydreams.blogspot.com
P.S.: Meu bloga não é lá essas coisas!
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 :(
ResponderExcluirhttp://queloucura-blog.blogspot.com
No me naum funcionou mas tudo bem....ainda estou tentando....
ResponderExcluirNão consegui , mas tudo bem. Não é totalmente necessário, né xD ?
ResponderExcluiré 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
ResponderExcluirbeijoos
http://abouteverything-cm.blogspot.com/
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
ResponderExcluirNum fufaaaaaaa DDDDDDDDD:
ResponderExcluirblog super lindo e maravilhoso *-* acho muito linda essas barrinhas personalizadas e queria colocar no meu blog também, tentei mais não funcionou DD:
ResponderExcluirseguindo <33 ' bjoooos ;**
não consegui fazer
ResponderExcluirFiz isso no meu blog e ficou muito fofo ! Acabei de começa a usar o blogger e já estou amando !
ResponderExcluirhttp://girls-pretty05.blogspot.com
OBS : O blog é lindo
Aneim , eu não consegui !
ExcluirQueria deixar o meu blog fofo , mas não dei conta mesmo ! :'((
Tenho que colar isso tudo mesmo . ?
Adorei sei blog, e seus tutorias vao-me ajudar muito a melhorar meu blog.
ResponderExcluirTou seguindo...
segue de volta se gostar,claro!
http://p-liveorexist.blogspot.pt/
Eu não consegui
ResponderExcluirEu também não ! rs.
ExcluirOiee
ResponderExcluiradoro seu blog
mais esse tutorial n funciona no meu blog ;(
voc pode me ajuda??
bjoss
Oiiie, o tuto não funcionou no meu blog !
ResponderExcluirAmeii o seu blog, seguindo segue de volta ?
xoxoxo Helo~~
Meigasecutes.blogspot.com
Por incrível que pareça eu consegui fazer estou amando os tutoriais!
ResponderExcluirPorque vc não faz essa barra noseublog Anny!
ResponderExcluirEu fiz no meu:
Perfectnaiveforever.blogspot.com
Liindo ameei....
ResponderExcluirto seguindo, segui de volta?
Oi boa tarde.Passei para deixar o endereço deste site pra você:www.vtubetools.com/code.hph
ResponderExcluirEle 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.
alguém me ajuda não consegui fazer :( ..alguém faz pra mimm
ResponderExcluirGuria 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
ResponderExcluirSabrina Neri
http://saiacurtasp.blogspot.com.br/
Não está funcionando :(
ResponderExcluirSerá que você pode me ajudar?
www.plataformadevidro.blogspot.com.br