Tutorial: Barra de rolagem personalizada para Blog


Hoje vou falar sobre como personalizar a barra de rolagem no seu blog e é bem simples! Já que a padrão e sempre sem graça...Vamos lá?

Clique em "Ler mais..."



Vai em seu "MODELO"

e agora Clique "Editar HTML"

Agora clique nos botões do teclado Ctrl F ← (Aviso: segurando as duas teclas e depois solta);

E procure por ]]>< /b:skin>, ←(Aviso: sem espaço) achou? Agora antes desse código cole o que está abaixo:

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #D80247; /*Cor da barrinha que se move*/
border: 1px solid #ffffff; /*Coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#FF0052; /*Cor da barrinha que se move*/
border: 1px solid #ffffff; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
 background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #; /*Coloque borda se quiser*/
}

Depois que for feito você muda as cores!

Fonte: -Bunny Crazy

8 comentários:

  1. No meu não aparece ]]> flor. Ajuda?
    Blog: amomeumundoglitterizado.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Beatriz!
      Então, como aqui nos comentários não dar pra postar imagens para explicar melhor, para achar a tag b:skin então recomendo que você dê uma olhada neste blog ela explica como achar a tag b:skin ok?
      Clique neste link do lado: http://migre.me/jYOYh

      Até+ Espero que consiga achar-lo! ;)
      Volte sempre!

      Excluir
  2. oiii gostei mto do seu blog eu criei o meu a pouco tempo e gostaria de fazer parceria,eu a agradeço!!!http://nerdseotomeuniverse.blogspot.com.br/) <~

    ResponderExcluir
    Respostas
    1. Obrigada pelo elogio!
      Claro, que aceito querida! Já coloquei seu link em parceria!
      Seja bem vinda!
      =*

      Excluir
  3. oii,gostei muito do seu blog!!

    ResponderExcluir
    Respostas
    1. Oi Karen! :D
      Obrigada por elogiar do meu blog!
      Fico feliz! Volte Sempre!

      Excluir
  4. Respostas
    1. Olá Marcella! Então para colocar a cor no código você procure escrito "background:" do lado dele você coloca o código da cor por exemplo eu escolhi rosa este código "#ff99ff" assim oh exemplo: background: #ff99ff; entendeu? Se quiser escolher as cores entre neste site aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

      Excluir
:) :( ;) :D :-/ :P :-O X(
:7 B-) :-S :(( :)) :| :-B ~X(
L-) (:| =D7 @-) :-w 7:P \m/ :-q :-bd

Antes de comentar leia:

• Muito obrigada por estar comentando
• Retribuo a todos portanto deixe sua Url (exemplo: <*a *href*= "___"*>Nome do Blog ou Site<*/a*>) <- Sem os * (asteriscos)
• Proibido Palavrões e Xingamentos será banido comentário!
NÃO aceito mais Divulgação no Facebook!
• Aceito Parceria aqui no Blog
• Se for copiar e colar no seu blog me avise e coloque o meu devido créditos
-> Obrigada ;*