Como personalizar a barra de rolagem do seu blog (Incrível !!!)


Olá bloggers e leitores! 
Hoje trarei um tutorial simples, fácil de instalar e que você pode personalizar a barra de rolagem do seu blog deixando-a ao seu gosto.

Agora tem um probleminha é que a barra de rolagem personalizada só será visível para quem estiver navegando no Chrome ou Safari. Mas vale a pena personalizá-la, pois a maioria dos navegantes hoje em dia utilizam o Chrome.

Bom, então vamos agora aprender como personalizar a barra de rolagem do seu blog:

Primeiro vá ao Painel de seu blog clique na aba Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código html dê um Ctrl+F para aparecer a caixa de busca e nela digite ]]></b:skin> e tecle Enter para localizar.
e acima do código encontrado cole este código:

/* --------- BARRA DE ROLAGEM PERSONALIZADA ----------- */
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #000000; /*Cor da barrinha que se move*/
height:50px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#000000; /*Cor da barrinha que se move*/
height:10px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #ca1700; /*Cor da parte fixa, que fica no fundo*/
}
Salve e visualize, se tiver tudo ok. Parabéns!

Nota: Se você tiver um pouco de conhecimento em CSS você ainda pode personalizar a barra de rolagem conforme as cores do seu blog. 

Postar um comentário

0 Comentários