09 maio 2016

Tutorial - Como colocar barra de rolagem personalizada no blog


Quem tem blog, sempre está à procura de uma forma de personalizar ele e deixar com um toque seu, único, não é!
O tutorial de hoje vai ensinar, de forma simples e rápida, como deixar a barrinha de rolagem, aquela que fica no lado direito do seu blog, que faz ele subir e descer, colorida.
Assim sendo, para combinar com seu blog ou, simplesmente por que você deseja. E vamos concordar, fica muito fofo.


Antes de começar o tutorial, faça o backup do seu blog, caso dê algum erro, vc não terá dor de cabeça e pode rapidamente recuperar ele. Caso você não saiba como fazer o backup, acesse este TUTORIAL, onde ensino como.

Fez o backup? Então vamos ao tutorial!

Como colocar o código da barrinha de rolagem personalizada:
1) Acesse o painel do seu blogger. No lado esquerdo terá o menu com os recursos do seu blog. Neste menu clique onde diz MODELO.

2) Abrira no lado direito informações como: Personalizar e Editar HTML. Você vai clicar em PERSONALIZAR, que vai estar destacado em laranja.

3) Uma página onde terá os detalhes para a personalização, você terá outro menu à esquerda, onde vai clicar em AVANÇADO.

4) Clicando no avançado, ao lado direito vai abrir outro menu, clique e segure a barrinha e desça até o final, onde, no final, terá de ADICIONAR CSS, clique nele.

5) Vai abrir no lado direito uma caixa em branco, onde iremos adicionar o código a seguir.

6) Copie o código: 

/* --------- BARRA DE ROLAGEM PERSONALIZADA ----------- */
/* Rolagem da Vertical da Página */
::-webkit-scrollbar-thumb:vertical {
background: #000; /*Cor da barrinha que se move*/
height:50px; /*Tamanho da barrinha */
}
/* Rolagem da Horizontal da Página */
::-webkit-scrollbar-thumb:horizontal {
background-color:#000; /*Cor da barrinha que se move*/
height:10px; /* tamanho da barrinha */
}
/*** Parte fixa da rolagem (fundo da barrinha) ***/
::-webkit-scrollbar {
height:10px; /* tamanho da barrinha */
width:15px; /*Largura da barra de rolagem*/
background: #ca1700; /*Cor do fundo*/
}
/* ------------- FIM DO CÓDIGO -------------- */

Selecione todo o código e clique com o botão direito do seu mouse, onde vai abrir o menu do que pode ou não ser feito com o código selecionado, e clique em copiar
Agora volte na caixa em branco, clique dentro da caixa e logo após clique com o botão direito do seu mouse, e no menu que vai abrir clique em colar.
Ou você pode fazer da seguinte forma: Selecione o código e aperte no seu teclado Ctrl e o C, e depois clicar na caixa em branco e apertar do seu teclado Ctrl e o V, que vai colocar o código dentro da caixa em branco.

7) Faça os ajustes necessários. Como mudar a cor para combinar com seu design/blog. 
No próprio código está descrito de forma que facilita suas mudanças desejadas.
Para ter acesso as paletas de cores em HTML, acesse este LINK. Clicando na cor desejada do site, vai abrir o código HTML, como suas combinações. Selecione o código html da cor que deseja e cole no código da barrinha que você adicionou no seu blog.
Lembrando: Se não tiver o jogo da velha (ex: #874e4c), mais a combinação de letras e números, pode não aparecer a cor.

8) Feito as mudanças, agora clique, lá em cima no lado direito, APLICAR AO BLOG.

Pronto, seu blog já está com a barra personalizada.

Antes:

Depois:

Espero ter ajudado, e de alguma forma este tutorial tenha utilidade para vocês.
Quer algum tutorial? Pode deixar nos comentários ou através do email contato@meuinfinito.com.br
Deseja ter um design maravilhoso? Contrate meus serviços. Peça orçamento através do email anazuky@hotmail.com ou pela FanPage.

Nenhum comentário:

Postar um comentário