segunda-feira, 24 de outubro de 2011

Barras de rolagem personalizadas para seu blog

Dias atrás eu ensinei como alterar a cor da barra de rolagem do blog, disponibilizei o cógigo e ensinei como colocar no blog. Mas desta vez, irei disponibilizar alguns códigos que vão deixar seu blog mais criativo com uma barra de rolagem personalizada.

Para colocar em seu blog, apenas entre no Editar HTML do mesmo e procure por:

]]></b:skin> 

Agora cole uns dos códigos abaixo acima dessa tag, em seguida salve. Lembrando que só testei no Google Chrome.

Estilo 1

image

/* Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 25px; <!-- largura da barra de rolagem -->
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 45%, #000000 50%, #ffffff 52%);
background: -webkit-gradient(linear, left top, right top, color-stop(45%,#ffffff), color-stop(50%,#000000), color-stop(52%,#ffffff));
background: -webkit-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: -o-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: -ms-linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
background: linear-gradient(left, #ffffff 45%,#000000 50%,#ffffff 52%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );

}

::-webkit-scrollbar-thumb:vertical {
height: 91px;
width:21px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/11.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}

Estilo 2

image

/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
<!-- largura da barra de rolagem -->
height: 5px;
width: 33px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
border-right: 1px solid #DCAF0C;
}

::-webkit-scrollbar-thumb:vertical {
height: 19px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/21.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}

Estilo 3

image

::-webkit-scrollbar {
<!-- largura da barra de rolagem -->
height: 5px;
width: 50px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
border-right: 1px solid #1E5799;
}

::-webkit-scrollbar-thumb:vertical {
height: 35px;
background: url(http://codigosblogger.webs.com/Gadgets/Barra%20de%20rolagem%20personalizadas/31.png) no-repeat center; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}

Marcadores: , , ,

7 Comentários:

Às 25 de outubro de 2011 13:15 , Blogger Rodrigo Viana disse...

Deu leg no meu. kk' Uso o navegador da google mesmo, mas ficou dando leg. Mas mesmo assim ta valendo, boa idéia de vocês. gostaria de uma barra igual a deste site, só que azul. valeu galera! :D

 
Às 26 de outubro de 2011 15:55 , Blogger Cecilio disse...

hehe

 
Às 30 de outubro de 2011 20:01 , Blogger Jonaz Lima disse...

como colocar uma igual a sua só que azul? Só trocar o link da dessa imagem?

 
Às 30 de outubro de 2011 21:41 , Blogger Códigos Blogger disse...

Olha aqui -> http://www.cblogger.net/2011/10/personalizando-barra-de-rolagem-do-blog.html

 
Às 31 de outubro de 2011 18:01 , Blogger Upgrade Films disse...

Show! Muito bom, to usando em meu blog. Valeu.

 
Às 9 de dezembro de 2011 11:43 , Blogger Mah Henri disse...

aquela barra não é igual a sua ! a sua e redonda aquela e ja mais reta.como faço pra deixar igual a sua so que outra cor?

 
Às 6 de outubro de 2013 08:53 , Blogger renata marcelino disse...

gente me ajudem não consegui axar aquele código ]]> :((

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial