Barra de rolagem estilo metro para blogger

► +A +/- -A
Olá pessoal, como a muito tempo não ando postando tutoriais para blogger, hoje vim com uma novidade, hoje irei ensina-los a como adicionar uma barra de rolagem personalizada estilo metro para seu blog, uma barra de rolagem simples em que ao mesmo tempo da estilo ao seu blog ou site, bom então vamos ao tutorial a seguir em apenas um simples passo.

Instalando a barra de rolagem (CSS)no seu HTML

1. Faça o Login no Blogger (Se estiver estiver logado, melhor).
2. Em seguida no menu suspenso, clique em modelo.
3. Em seguida clique no botão: Editar HTML
4. Aperte CTRL+F e procure pela seguinte tag:

]]></b:skin>

5. Depois disso, adicione o seguinte código acima da tag:

/* ----- Scrollbar ----- */
::-webkit-scrollbar-thumb:vertical {
height: 0px;
background-color:#094AB2;
}
::-webkit-scrollbar {
width:8px;
height: 0;
background:#eee;
margin-right:5px;

A parte destacada de vermelho corresponde a cor da barra de rolagem, se desejar poderá mudar a cor, mudando o código do mesmo por uma cor HTML, para isso acesse a lista de cores HTML na nossa tabela de cores:

Pronto, Depois disso basta apenas clicar em visualizar, caso esteja como desejado clique em salvar!
► Postagens Relacionadas:

11 Comentários

Herlan Santos disse...

Olá Caio.


Muito bom, gostei muito da barra, estou utilizando em um blog meu, obrigado.


Abraços!

5 de outubro de 2012 às 00:11
Caio Vinicius disse...

Olá Herlan.


Agradeço eu, ficamos felizes por estar satisfeito, Abraços amigo, fica com Deus!

5 de outubro de 2012 às 10:41
Caio Vinicius disse...

Olá Felipe, eu estou bastante grato como fundador do blog em receber elogios do nossos leitores, ficamos muito felizes em ter você como leitor, agradecemos seu comentário, seus elogios, e a colaboração, agradecemos... Sem dúvidas seu site é muito bom, e tem muita serventia para algumas pessoas, estarei fazendo o mesmo pelo seu site! Abraços, Fica com Deus.

24 de outubro de 2012 às 12:53
Ricardo Paccelle disse...

Nossa, muito da hora. Ficou ótimo, olha só:
http://thenewout.blogspot.com.br/2013/06/voces-precisam-ouvir-swarm-bionic-jive.html

6 de junho de 2013 às 22:21
Ricardo Paccelle disse...

Nossa, muito da hora. Ficou ótimo, olha só

http://thenewout.blogspot.com.br

6 de junho de 2013 às 22:22
Club Penguin disse...

Cara eu Não Achei o ]]> em que fileira fica mais ou menos ?

12 de junho de 2013 às 19:15
Club Penguin disse...

]]>

12 de junho de 2013 às 19:15
Alex Oliveira disse...

Vlw pela dica, tá de parabéns o blog.

19 de junho de 2013 às 15:50
Valdemir disse...

Caio, não encontro a dica que você deu (]]>). O meu é Blogger. No meu caso, quero tirar a barra de rolagem que coloquei para as postagens. Sabe como?

Agradecido, desde já! ;-)

21 de agosto de 2013 às 11:15
Luisa cardoso' disse...

No meu não mudou nada. Porqueee????

27 de julho de 2014 às 11:03
Caio Vinicius disse...

Olá Luisa, você tem certeza que encontrou a tag "]]>"?


Será necessário encontra-la para que em seguida cole o código que informei acima.


Caso você não encontre, procure pela tag "" no seu modelo
e abaixo dela cole o código CSS que informei no post, só que entre as tags


No caso Ficaria:






CSS AQUI!

27 de julho de 2014 às 11:28

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!