16 de out. de 2012

Tutorial: personalizando a barra de rolagem


Hello cutes!!! Como vocês estão? Bom, eu estou ótima, porém queria me desculpar por ter ficado ausente durante três dias, sorry!!! Hoje, de novo, eu trouxe um tutorial que mostra duas formas de personalizar sua barra de rolagem... Vamos ver o tutorial? Ah, e comentem falando o que acharam, se conseguiram fazer e qual modelo utilizaram, okay?
créditos: Cute World


Primeiramente, eu irei ensinar a forma redonda que é bem bonitinha, não acham? Eu achei super fofa :) Bom, chega de enrolação!!! Vamos ao tutorial:

Vá em Design> Editar HTML  procure por: ]]></b:skin>  Acima dele cole este código:

::-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;}

 você também pode alterar a cor da barra de rolagem (a cor e a borda) e o background dela.
#e7b3c2 - cor da barra de rolagem
#fff - borda da barra de rolagem
fundo da barra de rolagem - URL do background


Agora eu vou ensinar a barra de rolagem quadrada, eu  também acho ela bem fofa e chama menos atenção do que aquela redonda. Bom, continuando...


Vá em Design  Editar HTML e procure por: ]]></b:skin>  E acima dele, cole este código:
{
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 enteder agora:
Barra de rolagem: #9B30FF
Plano de fundo: #000000




15 comentários:

  1. Adoro esse tutu !! é bem útil e dá um efeito legal no blog!!
    AMEI !!
    Beijinhos Emilia.
    coffemilia.blogspot.com

    ResponderExcluir
  2. Vim retribuir a visita e adorei o blog!! Já estou seguindo!! Adoro tutoriais bem feitos *-* Parabéns!!

    xoxo
    http://amigadaleitora.blogspot.com.br/

    ResponderExcluir
  3. ficou bem legal o post amiga...Beijocas Pink

    Loucas Por Pink (◕‿◕✿) )

    http://renatinhaloucaporpink.blogspot.com.br

    ResponderExcluir
  4. adoro barra de rolagem personalizada,mas eu nunca consigo faze-la combinar com o blog *-*
    otimo tuto!
    Bjoos
    estilo você - perfil

    ResponderExcluir
  5. Adorei as dicas.

    www.ingridlemos.com.br

    ResponderExcluir
  6. Isa vou tentar fazer o primeiro modelo, depois te conto se deu certo. Bjks.

    Sheila
    http://belissimabysheila.blogspot.com.br

    ResponderExcluir
  7. Que legal flor...adorei o post.....
    renatinhaloucaporpinl.blogspot.com

    ResponderExcluir
  8. Ah flor eu amei o Tuto, pena que não tenho muito tempo
    :( Ah flor amei seu blog, e a suas postagens tbm
    Parabens desejo muitos sucessos '.'
    Ah sua meta era 160 seguidores ne? Pois eu completei agora vc ficou com 160. Obrigada pela visita em meu blog
    Beijos da Miih
    miilecharmedemeniina.blogspot.com

    ResponderExcluir
  9. Ai amei D+ o tuto e tbm amei o blog seguindo já !!

    ResponderExcluir
  10. Oii valeu pela dica ! Ameeei

    http://estranhaadolescenciaa.blogspot.com.br/

    Seguindo seu blog (: (se vc puder seguir o meu vai ser bom haha )

    ResponderExcluir
  11. Que lindo flor adorei o tutorial. (:

    blogchuvasdenovembro.blogspot.com

    ResponderExcluir
  12. Eu amava mudar a barra, mas hoje em dia eu esqueço na hora de fazer o lay! D:'
    hehe'
    Seguindo!
    Malikisses Xx

    Meu Jardim secreto

    ResponderExcluir
  13. Flor.. Sou eu.. a do blog Lahanate- Moda e beleza, lembra?!
    Vim visitar seu blog.. E posso confessar uma coisa amo blogs que ensinam coisinhas.. Adorei seu blog...#lindo

    Bjs

    ResponderExcluir
  14. não funciona com a barra de rolagem redonda fofa,tentei e não vai :'(

    http://animedoqem.blogspot.com.br/

    ResponderExcluir

LEIA ANTES DE COMENTAR
-não faço parcerias, apenas afiliações
-"segue meu blog" ou "seguindo, segue de volta" - só seguirei os blogs que eu realmente gostar, okay?
-não aceito tags nem selinhos
-deixe o link do seu blog no fim do comentário para que eu possa retribuir a visita