Image by Julia Cristy

Barra Personalizada ( 2 modos ) + começo do post nas dorgas !



Wiggle, wiggle, wiggle, wiggle, yeah...

Girl look at...
Ah
Oii  pandthenhas !!!
então né ^^ hehe' Bom continuando hoje eu vim postar um tutorial muito fácil


Redonda e a Quadrada :


 


Cliquem em leia mais.



Bom, primeiro eu vou ensinar a redonda:


Vá em Design> Editar HTML E procure por:
]]></b:skin>
Acima dele cole este código:
 

::-webkit-scrollbar-thumb:vertical {background: #e7b3c2;height:50px;border: 2px solid #fff;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: url(fundo da barra de rolagem) 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;}

Vamos entender o código agora:
1: O cdigo destacado de roxo é a cor da barra de rolagem.
2: o código destacado de vermelho é a borda da barra de rolagem.
3: O código destacado de azul é o plano de fundo da barra de rolagem. 

Agora vou ensinar a barra de rolagem quadrada.


Va em Design> Editar HTML e procure por:
]]></b:skin>
E acima dele, cole este código:

{scrollbar-face-color:#9B30FF;scrollbar-highlight-color:#9B30FF;scrollbar-3dlight-color:#000000;scrollbar-darkshadow-color:#000000;scrollbar-shadow-color:#9B30FF;scrollbar-arrow-color:#000000;scrollbar-track-color:#000000;}::-webkit-scrollbar {width: 12px; height: 4px; background: #000000; }::-webkit-scrollbar-thumb { background: #9B30FF; }

Vamos enteder agora:
Barra de rolagem: #9B30FF
Plano de fundo: #000000


Pronto, só visualizar e salvar. Brigada Gih e o blog Cute World pelo tutorial :3

kissus
Julis


6 comentários:

  1. Oi õ/

    Posso pedir um tutorial?? Eu queria saber como fazer esse mesmo efeito que você tem ao passar o mouse nos links, tipo riscado e muda de cor bem devagar *u*

    Valeu!

    Sweet Mulberry:
    http://meublog-jaque.blogspot.com.br/

    ResponderExcluir
  2. Muito bom seu tuto!
    Qual o endereço do seu tumblr?

    Bjos
    ---> srtaindependencia.blogspot.com.br

    ResponderExcluir
  3. Ola linda tudo bem?
    me seque vai
    beijos

    http://menina-de-atitude.blogspot.com.br/

    ResponderExcluir
  4. Oi Floor td bem ? Gostei desse tutorial!! Também queria fazer a mesma pergunta que a Jaqueline : como fazer esse mesmo efeito que você tem ao passar o mouse nos links, tipo riscado e muda de cor bem devagar ! Se puder me responde tah ? =3
    Bjs , o meu blog eh :
    teenspretty.blogspot.com

    Passa por lá tah ?? Bjs , voou seguir o seu site !!! xaau

    ResponderExcluir
  5. ooooi liinda, haha'. é a Luh, do TTG, eu abri o blog de novo ^^
    visita meu blog? Fiz um lay novo :3

    bjookas ^^

    http://tictacgirls.blogspot.com.br/

    ResponderExcluir

Comente ...
Se não um Panda vai roubar seu Cupcake a noite !