10

Como personalizar a barra de rolagem do blog

Um dos pontos principais para destacar o seu blog na blogosfera e a aparência, o designer do seu template conta bastante na hora em que visitam seu blog. Um blog personalizado é um grande avanço na caracterização de um blog, e um blog com barra de rolagem personalizada sem duvida fica marcada na mente de quem o visita e realmente faz a diferença.

Para destacar seu blog entre os demais vou lhes ensinar como personalizar a barra de rolagem de seu blog. Vamos ao tutorial.


Primeiro entre no seu painel do blogger acesse a opção modelo em seguida clique emeditar HTML como mostra a imagem abaixo.

Após seguir os passos acima procure com o auxilio de Ctrl+F o trecho ]]></b:skin> a após encontrar cole acima o seguinte código:


/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #000080; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color: #000080; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
 background: #D3D3D3; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}


Após seguir os passos acima é só visualizar, a barra de rolagem do seu blog ficará idêntica à imagem ao lado. Feito isso se estiver tudo ok salve as alterações.

Para mudar as cores da barra de rolagem é só mudar o código padrão pelo código referente à cor que deseja. Para saber qual o código referente à cor que deseja acesse a nossa tabela de cores e baixe a tabela com mais de 400 cores com seus respectivos códigos para usar no seu template.


Esse tutorial com certeza vai deixar o seu blog de cara nova e com identidade própria.


Atualização

O Blogger passou por algumas alterações para achar o trecho ]]></b:skin> clique dentro do código HTML segure Ctrl+F cole o trecho ]]></b:skin> e tecle Enter, pronto agora é só terminar com a personalização.


Para deixar as bordas arredondadas basta remover os trechos em vermelho do códigos.



Pesquisas que levaram a esse artigo:
  • Barra de rolagem personalizada
  • Mudar a cor da barra do blog
  • Personalizar barra de rolagem do blog
  • Como personalizar a barra de rolagem
  • Mudar a cor da barra de rolagem do blog
Gostou do artigo? Qualquer duvida senta-se a vontade para usar nosso sistema de comentário.

10 comentários:

  1. Olá eu gostaria de ajuda eu não acho o ]]> em HTML alguma ajuda pra mim? ^^

    ResponderExcluir
    Respostas
    1. Olá Ana AD, muito obrigado pelo seu comentário.

      Veja só o Blogger passou por algumas mudanças ultimamente, por esse motivo eu fiz uma atualização nesse tutorial, dê uma lida novamente.

      Excluir
  2. Achei tudo... modifiquei e o meu blog ficou mais organizado, e tal, gostei da ideia, vlw!
    Dá uma olhada como ficou lá, qualquer coisa que esteja errada me avisa blz?
    http://www.umesobretudo.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Edson Neto, muito obrigado pelo seu comentário.

      E que bom que tenha gostado da ideia.

      Excluir
    2. Jailson, por acaso tem como reduzir a largura da barra? Ou mesmo dar outro formato, mais quadrado por exemplo?

      Excluir
    3. Olá Edson Neto!

      Tem sim para alterar a largura vá nas ultimas linhas do código onde tem assim “Largura da barra de rolagem” e altere o número 15px para o número que você desejar, quanto ao formato da barra dê mais uma lida no post pois eu fiz uma alteração.

      Excluir
  3. Eu Nao Consegui Quando eu ponho aparece o code la em cima do blog pfv me ajuda

    ResponderExcluir
    Respostas
    1. Olá The Creator!

      Eu verifique e não há nada de errado no código certifique-se de colar o código acima do trecho ]]> no código fonte do seu template. Certifique-se também de ter copiado e colado o código por inteiro.

      Muito obrigado pelo seu comentário.

      Excluir
  4. Obrigado... deu muito certo... agora as cores estão combinando=

    www.joaozinhomenininho.blogspot.com.br

    cicloabraços

    ResponderExcluir
  5. Obrigado Jailson no meu blog deu tudo certo, adorei!!!

    ResponderExcluir

- O seu comentário é muito importante.
- Evite divulgar seu blog nos comentários.
- Se deseja sugerir, criticar ou propor uma parceria solicite nosso Formulário de Contato.
- Não utilize linguagem vulgar.
- Tente falar sobre algo que esteja relacionado ao artigo.

Related Posts Plugin for WordPress, Blogger...