4 de abr de 2013

Tutorial : Barra de rolagem no blog


Olá pessoal,hoje irei ensinar a como colocar 'Barra de rolagem'
colorida no blog,e tem 2 formas.Clique em leia mais para conferir o tutorial. 
Redonda: Quadrada:
  

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;} 

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,agora é só salvar!
Créditos: Cute World

4 comentários:

  1. Bom tutorial. Já conhecia, mas é sempre bom relembrar, né? Rsrs. Kissu#
    http://the-kawaiis.blogspot.com.br/

    ResponderExcluir
  2. Já conhecia ;3
    Já te coloquei nos afiliados
    http://yesterday-icons.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ok vou te colocar aqui tbm :3

      Excluir

Deixe um comentário ♥

Related Posts Plugin for WordPress, Blogger...