sexta-feira, 14 de outubro de 2011

Personalizando Barra de rolagem do blog

Barra de rolagem Chrome

Olá meus amigos! Hoje estarei ensinando vocês personalizar a barra de rolagem do seu blog, ou seja, mudar a cor, o tamanho e deixar seu blog mais atraente para o público. Vamos usar apenas códigos em CSS3, descartando outro tipo de linguagem. Lembrando que só testei no Google Chrome. Então vamos começar!

1. Entre no blogger e acesse o painel principal do seu blog.

2. Clique na guia “Modelo” –> “Edita HTML”.

3. Procure por ]]></b:skin>

4. Acima dessa linha cole o código abaixo.

/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 15px; <!-- largura da barra de rolagem -->
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #aebcbf; <!-- Cor do fundo da barra de rolagem -->
}

::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #000; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px; <!-- Largura da barra de rolagem na horizontal-->
background-color: #FFA500; <!- cor da barra de rolagem na horizontal-->
}

5. Faça as devidas modificações caso necessite e pronto.

Em breve estarei postando diversos estilos de barra de rolagem para você aplicar em seu blog. Espero que ter ajudado. Até o próximo tutorial!

Marcadores: , , , ,

19 Comentários:

Às 14 de outubro de 2011 18:18 , Blogger Marilucia disse...

Olá mais uma vez tentei também usar este tuto e deu erro, o que será que está acontecendo? Estou querendo aplicar as mudanças neste blog http://www.plugadotecnologia.com

 
Às 14 de outubro de 2011 20:29 , Blogger Códigos Blogger disse...

Qual navegador você está usando?

 
Às 14 de outubro de 2011 20:38 , Blogger Marilucia disse...

O chrome

 
Às 17 de outubro de 2011 14:36 , Blogger XxFernandoxX disse...

mto foda vcs

 
Às 17 de outubro de 2011 15:06 , Blogger Códigos Blogger disse...

Marilucia, estranho... Uso o chrome e funciona normalmente.

 
Às 17 de outubro de 2011 17:58 , Blogger Black Goddess disse...

nao consegui!

nao aconteceu nada

 
Às 18 de outubro de 2011 00:23 , Blogger Códigos Blogger disse...

Black Goddess, certifique-se que você esteja usando o chrome.

 
Às 26 de outubro de 2011 14:34 , Blogger Almir Ferreira disse...

Aqui eu coloquei no meu pra testar mas só tá funcionou realmente no chrome, o firefoz não. Mas valeu.

Almir Ferreira
Rama na Vimana

 
Às 26 de outubro de 2011 22:52 , Blogger Códigos Blogger disse...

Sim, só funciona no Chrome.

 
Às 25 de novembro de 2011 14:43 , Blogger Deville Madoux disse...

Pra que não tá funcionando.
Se dá erro de XML façam o seguinte:
tirem todos os cometários que ele fez (entre e /*--*/) e os espaços depois dos ponto-virgulas(;). Pra mim só funcionou assim.

 
Às 1 de dezembro de 2011 11:36 , Blogger Códigos Blogger disse...

Outra dica é usar a versão antiga do blogger pra fazer esta modificação.

 
Às 4 de dezembro de 2011 11:36 , Blogger vinicius disse...

mo meu não ficou arrendondado

 
Às 5 de dezembro de 2011 14:01 , Blogger Códigos Blogger disse...

Qual navegador você está usando?

 
Às 7 de dezembro de 2011 23:34 , Blogger Izaque disse...

Conaefui kk dahora

 
Às 29 de dezembro de 2011 16:57 , Blogger Dymas disse...

Estou usando o Chrome e não ficou arredondado, eu cliquei em "Visualizar" e não mostrou nenhum erro, só não ficou arredondada, o resto ta certo. :(

 
Às 7 de janeiro de 2012 23:24 , Blogger César Henrique disse...

Ei véio não fica arredondado ñ... conserta por favor! (estou usando a ultima versão do chrome)

 
Às 18 de janeiro de 2012 12:15 , Blogger TESTES disse...

Gente, eu acho que é porque o Google Chromeestá atualizado. Por ex, antes, eu conseguia deixar o sidebar do twitter transparente pelo google chrome e pelo Explore, agora só consigo pelo explore....

 
Às 8 de novembro de 2013 00:37 , Blogger Bruno Andrade disse...

Muito bom!
Obrigado!

 
Às 21 de dezembro de 2013 10:37 , Blogger Paul Richard Malik Croft disse...

Funcionou direitinho U.uu

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial