07 julho 2012

Barra de Rolagem Colorida


Olá minhas sereias tudo beleza? E ai estão gostando do MFF das postagens ? Da nova postadora ?
Espero que estão gostando  Qualquer reclamação fale comigo
Vim hoje fazer um tutorial ótimo, e tenho certeza que vocês vão amar
Não me diga que você sempre pesquisa pesquisa como EU  e sempre o tutorial estava errado?
É isso aconteceu muito Mais aqui no MFF todos os Tutoriais são testados exclusivamente para vocês Todas as imagens são Nossas e de ninguem. Recuso plágio
Chega de drama ne? Então o Tutorial é de Barra de rolagem dois tipos por exemplo a minha é a quadrado e existe a redonda é muito linda querem ve Muitas pessoas não conhecem mais vou postar então Barra de Rolagem Quadrada X Redonda certo?
Vamos ao que interessa.
Ficaria assim:




Se interessou Leia Mais...
Entra na sua conta do Blogger vai em Design e Html e aperte Ctrl + F e procure por:

                                                                   ]]></b:skin>

                                          O codigo irá aparecer em Laranja 

E em cima de ]]></b:skin> você coloca esse código

Redonda
::-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(fundo da barra de rolagem) 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;}

 Agora Vamos entender o código O código destacado em azul é a cor da barra de rolagem, o de vermelho é a borda da barra de rolagem e o rosa é a imagem do fundo da  barra de rolagem

Agora Vamos a Quadrada


Procure por :
]]></b:skin>
Vai aparecer em Laranja.
E logo acima de ]]></b:skin> cole isso:



{
scrollbar-face-color:#9B30FF;
scrollbar-highlight-color:#9B30FF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9B30FF;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#000000;
}
::-webkit-scrollbar {width: 12px; height: 4px; background: #000000; }
::-webkit-scrollbar-thumb { background: #9B30FF; }
Vamos entender o Codigo

Em verde é a cor da Barra de Rolagem e a rosa é o fundo da Barra.

É isso minhas sereias o Tutorial foi feito por mim, recuso plagioBeijão

Atenciosamente Nath

Você já deu uma olhadinha nas regras de Todos os Blogger existente no mundo? Não então olha:



10 comentários:

  1. Aaai, amei o tuto! Eu acho o resultado super fofo, mas não sei porque penso que não combina com meu blog ><
    Ótimo post, viu?
    Beijinhos :*

    www.PiinkCookie.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada minha Shr Paula! O resultado é lindo mesmo, mais seu blog é mais lindo que o resultado.
      Beijão minha lindona!

      Excluir
  2. Eu já sabia, fica linda essa barra *3*
    Seguindo!
    http://lazygirll.blogspot.com.br/

    ResponderExcluir
  3. Acho lindo. No próximo design do blog, vou tentar arriscar e usar ;)

    adolescentesimperfeitas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Nem precisa arriscar. Sem duvidas você consegue fazer!
      é muito facil.
      Beijooos

      Excluir
  4. WHAT ? Gostando ? 'HAHA Eu estou amando a nova postadora !

    ResponderExcluir
    Respostas
    1. Ual... Ela deve ficar muito feliz... Pela sua resposta.
      Beijos

      Excluir
  5. eeei amei, coloquei no meu bloguinho.

    ResponderExcluir