06 outubro 2011

Tutorizando - Barra de rolagem personalizada


Eu percebi que falta uma coisa no blog: tutoriais. Isso é porque eu definitivamente não levo jeito pra mexer com códigos. Mas o que eu não faço pelas minhas leitoras? Eu tive que correr atrás de um tutorial pra postar aqui, por que as minhas leitoras tem direito, não? Hoje  eu vou ensinar como fazer uma barra de rolagem que nem a do blog. Primeiramente eu queria dar os créditos do código ao blog Vivislândia, mas eu editei pra dar o efeito do background. Vamos lá? Clica no Leia mais!




 Vá em design Editar HTMLCtrl+f  procure por:  ]]> ; Depos que encontrar, cole ACIMA o código:

::-webkit-scrollbar-thumb:vertical {background: url(‘URL DA IMAGEM’);height:50px;border: 2px solid background: url(‘URL DA IMAGEM’);
box-shadow: 2px 2px 4px #bebdbd;-moz-box-shadow: 2px 2px 4px #bebdbd;-webkit-box-shadow: 2px 2px 4px #bebdbd;-khtml-box-shadow: 2px 2px 4px #bebdbd;-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/}::-webkit-scrollbar-thumb:horizontal {background-color:#f26d92; height:10px;border: 1px dashed #fff;-webkit-box-shadow:0 0 1em #eee; }::-webkit-scrollbar {height:10px; width:20px; background: #FFFFFF repeat;box-shadow: -3px -2px 10px #bebdbd;-moz-box-shadow: -3px -2px 10px #bebdbd;-webkit-box-shadow: -3px -2px 10px #bebdbd;-khtml-box-shadow: -3px -2px 10px #bebdbd;}
Nas duas partes que estão em rosa você vai colocar a url da imagem que você quer que fique na barra móvel, que aqui no blog é o background jeans.
Na parte que está em verde você vai colocar a cor que você quer que fique na barra fixa, que aqui no blog é cinza clarinho. Se ao invés de colocar cor na barra fixa você quiser colocar uma imagem, é só substituir "#FFFFFF " por " url(‘URL DA IMAGEM') ". daí você coloca a url da imagem dentro dos parênteses e fica tudo do jeitinho que você sempre sonhou :) 


Como eu sou muito boazinha, eu trouxe alguns backgrounds para vocês usarem:


  
 só clica com o botão direito e pega a url (avá Cris)


E é isso, se vocês gostaram e querem mais tutoriais aqui no blog, comentem, que aí eu vou procurar mais!

6 comentários:

Tati disse...

vc tbm ja esta em meus parceiros ^^

Anônimo disse...

vou usar esse tutorial! Seguindo, lindo o blog!
www.topickiss.blogspot.com

Renata disse...

Oi desculpa nao ter respondido voce antes amr sim adorei o blog se ele for afiliado seria o maior prazer ta beijinhos'

MENINA PERFEITA

Kayla Cristina disse...

Oii, menina!!
parabéns pelo blog!! ele é super!!
estou te seguindo
espero retribuição S2
bjokas
kah santos :)
http://fluorescentadolecent.blogspot.com/

Marilia disse...

Oi me afilia?
beijos
http://manahatori-teengirls.blogspot.com/

Unknown disse...

Olá tudo bem?
Amei seu cantinho e já estou seguindo!
Parabêns pelo Blog e sucesso!

Se quiser me visitar,será muito bem vinda e se gostar e quiser seguir também!
Beijinhos!

http://umamulherbemvestida.blogspot.com