24 setembro 2014

Barra de rolagem colorida para blog

Barra de navegação colorida no blog

Hoje eu vou te ensinar, como colocar uma barra de rolagem colorida em seu blog. Fica bem legal e, consequentemente, da mais vida ao seu projeto e acompanha o designer do seu tema. 

Para quem não sabe do que eu estou falando, a barra de rolagem é essa barrinha na lateral direita do blog para subir e descer ao longo da página.

Veja do que eu estou falando? Veja na imagem abaixo. Basta trocar as cores.

Barra de rolagem colorida para blog e sites


Gostou? Então, vamos logo trocar a barra de rolagem do blog e colocá-la colorida. É muito fácil.


Tutorial

1. Acesse o painel do seu blog.
2. Vá em Modelo e em HTML.
3. Procure por:


]]></b:skin>
 

4. Logo acima dela cole esse código ↓:


/* ---------------- Barra de navegação  http://querodicasde.com.br ---------------- */ 
::-webkit-scrollbar {width: 12px;height: 5px;} /*larguras as barras */
::-webkit-scrollbar-track-piece {background-color:#000000;") repeat scroll 0 0 transparent;} /*fundo */
::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: #FF69B4;} /*cor da barra */
::-webkit-scrollbar-thumb:horizontal {width: 15px;background-color: #FF69B4;} /*cor da barra */ 

 

5. Faça as alterações para personalizá-la (eu deixei ao lado de cada código) e pronto! Sua barra de navegação está perfeita!

Tabela de cores - AQUI

Beijinhos 

2 comentários:

  1. BOA TARDE
    adorei o blogger
    tentei fazer tudo como recomendado mas nao deu certo copiei o codigo colei na caixa editar HTML

    ]]>
    salvei o modelo e visualizei mas nao aparece nada . o cursor nao alterou a cor . por favor podem me ajudar ? obrigado pelo espaço fornecido aguardando assim uma resposta precisa da parte
    Atenciosamente
    Marcia

    ResponderExcluir
    Respostas
    1. Olá Márcia. Que bom que tenha gostado da plataforma Blogger, ele é muito bom.
      Em relação ao código, eu testei, mais uma vez e está perfeitamente funcionando. Entre novamente no Editar HTML do seu blog e procure por ]]> e acima dele cole o código da barra e altere a cor pela SUA cor desejada. :-bd

      Excluir

Amigos do Blog



Agregadores