Dois Tipos de Barras de Rolagem

Hey pessoinhas da Terra e alienígenas  (◕ w ◕)〴! Uma pergunta filosófica: por que nós existimos? *pensando pensando pensando* Me fizeram essa pergunta hoje e eu não soube o que responder haha ^^'.  Pulando isso, eu decidi postar só a cada 3 dias aqui no AEG. Como isso tinha se tornando uma rotina automaticamente, resolvi deixar oficial. Bom minna (e aliens :3) hoje vou postar mais um "micro-tutorial" pra ajudar vocês, ou então caso já tenham visto isso em algum outro lugar. Eu já vi esse tuto circulando por muitos blogs (sério, muitos mesmo õ-o) maas, como eu nunca vi ninguém que colocasse as duas maneiras de ter uma barra de rolagem personalizada em um só post, resolvi ser a primeira C: ...Tá, talvez em algum blog desconhecido por mim uma pessoinha já tenha feito isso só que... Não vem ao caso agora não é mesmo? XDDD'

Pra conferir o tutorial clique em "Leia Mais" onegaai *U*.

1 -  Barra de rolagem com borda arredondada e background:

Pode não parecer mas é essa que eu uso. A única diferença é que eu tenho um background com uma cor lisa ;3.

Primeiramente você vai abrir o painel do blogger, clicar em Design ~> Editar HTML~> Aperte ctrl F. Depois disso procure por ]] ></b:skin . Assim que achar cole o seguinte código abaixo da tag.

html::-webkit-scrollbar {width:22; height:auto;background: #FFF;}<br /> html::-webkit-scrollbar-corner { background: #FFF;}<br /> html::-webkit-scrollbar-button:vertical {height:1px;display:block;}<br /> html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}<br /> html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM );border: 1px solid #A2A2A2;border-right:none;-webkit-border-radius: 8px;}<br /> html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM );border: 1px solid #A2A2A2;border-bottom;}<br /> html::-webkit-scrollbar-thumb {background-image: url(LINK DA IMAGEM );}<br /> html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM );border: 1px solid #A2A2A2;}<br /> html::-webkit-scrollbar-track-piece {background: none;}<br /> html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}<br /> html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}

Colou? Agora fica fácil! Basta começar a editar o seu código. Agora é só colocar o URL do seu background no lugar de "LINK DA IMAGEM", lembrando que nesses o background terá que ser sempre o mesmo. Para colocar um background na outra parte da barra (a 'inferior') basta adicionar:  " -image: url(LINK DA IMAGEM ) " ao lado esquerdo de " html::-webkit-scrollbar {width:22; height:auto;background " e colocar o background desejado.

Ah sim, outra dica: se você preferir ter a barra de rolagem menos arredondada basta mudar o número depois de 'radius:' eu uso 5px ao invés de 8px pra dar uma diferenciada dos demais blogs que usam esse tipo de barra de rolagem x)~

2- A barra de rolagem "fininha" e colorida como a da imagem abaixo:

Pra colocá-la no seu blog, faça o seguinte: Vá no painel~>Design~>EditarHTML~> aperte ctrl F e procure por ]]></b:skin>. Quando achar, cole o seguinte código acima da tag:
*{<br /> scrollbar-face-color:#FF69B4;<br /> scrollbar-highlight-color:#FF69B4;<br /> scrollbar-3dlight-color:#343434;<br /> scrollbar-darkshadow-color:#343434;<br /> scrollbar-shadow-color:#FF69B4;<br /> scrollbar-arrow-color:#343434;<br /> scrollbar-track-color:#343434;<br /> }<br /> <br /> ::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }<br /> ::-webkit-scrollbar-thumb { background: #FF69B4; }

Agora é só visualizar e se tudo tiver dado certo salve o modelo >u<. Nesse tipo de barra também dá pra colocar background com imagem, basta fazer algumas modificaçõezinhas hehehe~.
Para fazer isso coloque "-image: url(LINK DA IMAGEM )" no lugar de: ":#343434; " e ": #FF69B4;" das duas últimas linhas, lembrando que em cada uma você coloca uma imagem diferente (senão não vai dar pra diferenciar as partes da barra de rolagem >:T)

Prontiinho! Bem fácil né? *0*

Espero que tenham gostado e... atée daqui três dias hihi ^◡^!

Créditos:♥♥

- camii