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*/
}
::-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
Olá eu gostaria de ajuda eu não acho o ]]> em HTML alguma ajuda pra mim? ^^
ResponderExcluirOlá Ana AD, muito obrigado pelo seu comentário.
ExcluirVeja só o Blogger passou por algumas mudanças ultimamente, por esse motivo eu fiz uma atualização nesse tutorial, dê uma lida novamente.
Achei tudo... modifiquei e o meu blog ficou mais organizado, e tal, gostei da ideia, vlw!
ResponderExcluirDá uma olhada como ficou lá, qualquer coisa que esteja errada me avisa blz?
http://www.umesobretudo.blogspot.com
Olá Edson Neto, muito obrigado pelo seu comentário.
ExcluirE que bom que tenha gostado da ideia.
Jailson, por acaso tem como reduzir a largura da barra? Ou mesmo dar outro formato, mais quadrado por exemplo?
ExcluirOlá Edson Neto!
ExcluirTem 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.
Eu Nao Consegui Quando eu ponho aparece o code la em cima do blog pfv me ajuda
ResponderExcluirOlá The Creator!
ExcluirEu 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.
Obrigado... deu muito certo... agora as cores estão combinando=
ResponderExcluirwww.joaozinhomenininho.blogspot.com.br
cicloabraços
Obrigado Jailson no meu blog deu tudo certo, adorei!!!
ResponderExcluir