Personalizar barra de rolagem blog

Personalizar a barra de rolagem no seu blog pode ser mais um diferencial para ele se destacar dentre seus concorrentes. Embora um recurso simples e de fácil implementação, mais torna seu blog ainda mais personalizado e com diferencial que pode melhorar ainda mais a estética do mesmo. Hoje vamos ensinar aqui no blogger na web a personalizar esta barra de rolagem, que é muito simples.

personalizar_barra_rolagem

Personalizar barra de rolagem blog – Edição do template

Para personalizar a barra de rolagem do seu blog, siga os passos abaixo:

1) Se você utiliza a versão antiga do blogger, acesse sua conta e vá em Design > Editar HTML;

personalizar_barra_rolagem_internace_antiga

2) Se você utiliza a versão nova do blogger, acesse sua conta e vá em Modelo > Editar HTML;

personalizar_barra_rolagem_nova_interface

Personalizar barra de rolagem blog – Acrescentar código

</b:skin>

3) Após localizar o código, adicione o código abaixo logo acima do trecho localizado:

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar {width: 9px;height: 5px;}
::-webkit-scrollbar-track-piece {background: url("https://lh4.googleusercontent.com/-I4h9oNSId6k/TjM9C955v8I/AAAAAAAAASQ/8ENCqH6Y0Z8/body.png") repeat scroll 0 0 transparent;}
::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: #666;}
::-webkit-scrollbar-thumb:horizontal {width: 5px;background-color: #666;}

Após isto, basta clicar em Salvar e conferir o resultado.

Adriano Luz: Pós-graduado em Sistemas de Informação e Banco de dados, atualmente atua com consultoria em sistemas, SEO e marketing digital. Amante por blogs, é responsável pela administração do blog Publicidade na web.

Postado em: Recursos blogger

7 comentários:

soueste QUOTIDIANO disse...: Olá Adriano: deverias exemplificar qual barra rolante, de que tão bem, ofereces é que se forem quase Todos como eu,não sabemos do que falas,se não fosse essa dificuldade até colocava lá o código,mas sendo assim aguardo por um exemplo.Contudo Obrigado pela gratuita oferta.
Abraço; 9 de fevereiro de 2012 19:04
Adriano Luz disse...: Ola Soueste Quotidiano,

Agradeço seu contato e observação, até mesmo pela melhoria de nossas exemplificações.

A Barra de rolagem que nos referimos é a barra lateral do seu navegador, que é fica no canto direito na posição vertical.

Vou providenciar a alteração do artigo para colocar uma imagem com o resultado desta personalização da barra de rolagem.

Um abraço
Adriano Luz; 9 de fevereiro de 2012 20:00
Bird Troll disse...: Belo tutorial Adriano,
Estou começando agora, como muitos blogueiros e estou tentando me destacar dentro te milhares de outros blogs...
fiz tudo como no tutorial, mais a minha barra de rolagem continua igual, nós precisamos alterar algo ? seria o #666 ?; 20 de fevereiro de 2012 09:36
Adriano Luz disse...: Ola Bird Troll,

Muito obrigado por participar. É isto sim, para alterar você precisa colocar neste espaço a fonte que mais lhe agradar.

Qualquer coisa me avise.

Um abraço
Adriano Luz; 20 de fevereiro de 2012 18:21
Autora Luiza P. disse...: a barra fica cinza. Não dá para mudar a cor? Por favor responda; 26 de fevereiro de 2012 16:37
Adriano Luz disse...: Ola, Para mudar de cor você tem que alterar o trecho do código com a cor #666 e substituir pela cor desejada.

Tente e qualquer coisa me avise.

Um abraço
Adriano Luz; 26 de fevereiro de 2012 19:58
007 qwe2 disse...: Não conseguir encontrar essa parte no html; 10 de maio de 2012 17:03