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!
11 Comentários
Olá Caio.
5 de outubro de 2012 às 00:11Muito bom, gostei muito da barra, estou utilizando em um blog meu, obrigado.
Abraços!
Olá Herlan.
5 de outubro de 2012 às 10:41Agradeço eu, ficamos felizes por estar satisfeito, Abraços amigo, fica com Deus!
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:53Nossa, muito da hora. Ficou ótimo, olha só:
6 de junho de 2013 às 22:21http://thenewout.blogspot.com.br/2013/06/voces-precisam-ouvir-swarm-bionic-jive.html
Nossa, muito da hora. Ficou ótimo, olha só
6 de junho de 2013 às 22:22http://thenewout.blogspot.com.br
Cara eu Não Achei o ]]> em que fileira fica mais ou menos ?
12 de junho de 2013 às 19:15]]>
12 de junho de 2013 às 19:15Vlw pela dica, tá de parabéns o blog.
19 de junho de 2013 às 15:50Caio, 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?
21 de agosto de 2013 às 11:15Agradecido, desde já! ;-)
No meu não mudou nada. Porqueee????
27 de julho de 2014 às 11:03Olá Luisa, você tem certeza que encontrou a tag "]]>"?
27 de julho de 2014 às 11:28Será 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!
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!