Barra Lateral aredondada com imagem de fundo

Imagem nada haver com o tema ^^


Oi meu moranguinhos... Com certeza vocês já reparam num item indispensável hoje em dia na maioria dos blogs não é... A barra de rolagem...

Antigamente ela passava despercebida mais hoje ela ganhou cor e formas diferentes a fazem a diferença entre um blog e outro...

Não sei se vocês reparam mais eu acabei de colocar uma barra lateral personalizada no blog( deixando bem claro que não foi o Papo de Amigas que criou esse tutorial , eu encontrei ele no blog Louca atitude ok!)

Pra conseguir esse resultado, eu tive que procurar muito por esse código, por que pra minha desgraça os outros códigos não funcionavam, e além de ter dado certo ele é muito simples, tão fácil q qualquer m pode fazer...

Mas vamos por a mão na massa... clika ai em continuar pra ver esse código



Vá em Design - Editar Html -Clique em Ctrl + F (caixinha de busca)ou F3 e procure por :]]></b:skin>


Quando achar coloque antes ]]></b:skin> de  o código abaixo :


::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;
height:50px;
border: 2px solid #fff;

box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(endereço da imagem) repeat;

box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}



  • O código que esta em azul( #e7b3c2 ) é a cor da barra redondinha
  • O código em verde ( #fff )é a cor da borda da sua barra
  • Onde esta escrito de rosa ( endereço da imagem ) é a onde vc deve por o endereço da  imagem que ficara no fundo da sua barra 




Viu meu moranguinhos muito fácil né... Qualquer duvida deixem um recado pelos comentários e eu irei responder... bjos até a próxima 



3 comentários:

Rebeca disse...

Eu fiz isso no meu blog, tudo certo, e ficou Horrível, o HTML ficou lá encima, na página inicial.

Aline disse...

Isso também tava acontecendo comigo, até você me ajudar! =D Tava procurando muito um tutorial pra personalizar a barra de rolagem do meu blog e todos não davam certo para minha tristeza. Mas o seu deu de primeira, acho que é o jeito de ensinar sei lá rs muito obrigado flor, gostei do blog já estou seguindo!

mart disse...

Amor não está indo no meu.você personaliza pra mim o blog?

Postar um comentário

Página Anterior Próxima Página Home