html

Como colocar barra de rolagem colorida no blog?

11:34

                            

Olá minhas caras amigas tudo bem? Bom primeiro vou me explicar a vocês que eu to um pouco ausente né? Já virou costume meu agora vir e postar um dia e outro não, certo? Mas juro meninas que não é por causa de falta de tempo ou falta de inspiração, eu to cheia de posts em rascunhos que eu sempre faço á cada 2 semanas eu tiro 1 dia para fazer vários posts para quando eu ficar sem o que postar eles já estão lá, mas o real problema é que eu tenho meio que esquecido se eu já postei no dia ou não, eu chego de noite e penso que eu já postei de manhã e depois eu percebo que eu não tinha postado. Prometo meninas que vou começar a postar de manhã, assim isso não vai mais ocorrer, e dai eu deixo a parte da noite para me dedicar mais a outras coisas do blog, como responder comentários, to cheia de comentários para responder, e visitar outros blogs, terminar 3 layouts que pretendo fazer por esses dias, logo você terão uma surpresa, e acho que só isso. Bom não vou mais enrolar e vamos ao post em si?
Trouxe á vocês mais um tuto de HTML que ajuda o blog a ter aquele arzinho de fofo sabe?
A barra de rolagem colorida é muito usada em blogs, e podem mudar muito a cara do seu blog, então vamos ao tuto meninas? Aconselho que prestem atenção no que estão fazendo porque é muito simples, mas os passos são um pouco longos e a atenção é fundamental. Simbora ver?

Créditos vão á Jackie Dream {www}



1º) Design >> Editar HTML >> Aperte CTRL + F e pesquise por:

]]></b:skin>

-----------------------

2º) Cole ANTES do código esse outro aqui:


{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF69B4;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; }

-----------------------
3º) Bom, agora você precisa personalizar. Veja como:

 - width: 12px = Essa é a largura da barra.
background: #343434 = Esse é o fundo da sua barra
background: #FF69B4 = Esse trecho é a cor da barra da rolagem. 


-----------------------
4º) Vá até a Tabela de Cores e escolha duas cores: uma pro fundo da barra e outra pra barrinha. 

-----------------------

Simples e rápido não?

You Might Also Like

50 Chocolates viraram Cupcakes

  1. Adoro esses tutoriais, porque vocês ensinam certinho! *O*

    Beijos,

    Caroline, do Criticando por Aí.

    ResponderExcluir
  2. Adorei o tutorial! Muito legal, fica lindo, já uso ele no meu blog.
    Beijos,
    www.flowerofcupcakes.blogspot.com

    ResponderExcluir
  3. Muito útil o tutorial,mas já tinha visto em alguns outros blogs e colocado no meu layout.
    http://eldiarycrazy-official.blogspot.com.br/
    BEEEEIJOS Y.Y

    ResponderExcluir
  4. Bem útil *w*
    Gostei!

    Beijos :*

    Visita >> http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  5. Ooi, amei o tutorial!

    chuvasdioutono.blogspot.com.br

    ResponderExcluir
  6. Otimo tutorial,eu sou muito burra,nunca consigo fazer esse tuto,mas eu vou fazer do jeito que ta pedindo ae,quem sabe eu acerto?! kkkk
    Obrigado por seguir meu blog,amei sua visita ,teu blog tb!
    Bjs Mel-Chan
    http://melissarocks2.blogspot.com.br/

    ResponderExcluir
  7. Amore eu ameiii, sua visitinha por lá
    mas é que tipo. eu já te sigo rsrsrs'
    Faz um bom tempo, eu acho que desde que eu tinha uns 20 seguidores kkkk
    Então eu vim agradecer por retribuir só agr mas do mesmo jeito ta valendo :D
    Vou tentar colocar a barra de rolagem coolorida rsrs'
    Bjinhos, ahh sim e se quiser participa lá do concurso no blog :)
    Te espero lá \o\o

    ResponderExcluir
    Respostas
    1. Que bom linda, nossa fico mt feliz. Obrigada mesmo vviu?
      Desculpa por nao ter te visitado antes ta?
      Beijos

      Excluir
  8. Lá no meu blog tá rolando um concurso para postadora/moderadora, participa lá... xD

    - Obrigada pela atenção!

    adolescentelouco-lol.blogspot.com

    ResponderExcluir
    Respostas
    1. Seria otimo poder te ajudar linda.
      Mas prefiro cuidar so de um blog, responsabilidade rs
      Mas tomara que consiga alguem bem legal,
      Beijao

      Excluir
  9. Adorei seu blog, mt bom mesmo, visite o meu, espero que goste. bjs

    ResponderExcluir
  10. Estou adorando as dicas sobre como estilizar o blog, estou um pouco parada mas pretendo dar um up no meu blog, e suas dicas estão sendo valiosas caso tenha interesse pode me seguir, será um prazer!!!

    www.perfumesealgoamais.blogspot.com

    ResponderExcluir
  11. Oi Giselle, estava caçando outro tutorial pq minha barra de rolagem colorida sumiu e achei vc!
    Tb compartilho da mesma fé que a sua!Estou te seguindo!
    Se quiser me visitar o blog é www.garotadelondres.com.br - É o blog da Loja de Make Up
    beijos

    ResponderExcluir
    Respostas
    1. Fico feliz que eu tenha te ajudado linda.
      E fico mais feliz ainda de saber que cremos no mesmo Deus
      Obrigada pela visita seja bem vinda sempre.
      Que Deus te abençoe

      Excluir
  12. Oiie amore amo esse blog mais eu não consegui colocar a barrinha no meu! queria ajuda pois acho muito fofo..Agradeço a resposta!

    ResponderExcluir
    Respostas
    1. Qual sua duvida flor?
      Fala onde nao deu? Pq esse tuto a testei e ta certinho rs.
      Beijos linda

      Excluir
  13. O tuto é otimo, que peninha que não fez mudança nenhuma no meu, se puder me ajuda, Obs. fiz tudo como manda.

    ResponderExcluir
    Respostas
    1. Vou rever entao qual o problema. Ja é a segunda que diz isso.
      Beijos

      Excluir
  14. Oii! Adorei o blog, só que tem um pequeno detalhe.. Com o novo editor de html eu acho que mudou alguma coisa dos códigos, porque já não é o primeiro tutorial que eu não os acho... Gostaria de saber se você poderia me ajudar em relação aos tutoriais sobre esses detalhes como a barra de rolagem colorida, o botão "Mais Informações" com imagem e outros com o novo editor, que por mais organizado que agora esteja, para os principiantes é mais difícil! hahaha
    Segue o meu blog: http://historiasdagaboo.blogspot.com
    Beijinhos e espero o seu retorno!!
    Gabo

    ResponderExcluir
    Respostas
    1. É muitas pessoas estao com essa duvida mesmo.
      Bom, para resolver isso é simples.
      Vc vai no codigo do html e digita ...
      Logo após desses "...", vc desce ate a primeira setinha e clica par abrir ela.
      Entao vc procura o codigo normalmente que achara.
      Se tiver algo errado pode pergunta
      Beijao

      Excluir
  15. Amei! Ensinou tudo certinho e me ajudou muito mesmo!! Amei de mais o Blog!
    http://meucantinhodablogosfera.blogspot.com.br/
    Obs: eu ainda to fazendo o visual do blog e tal então, não se assuste

    ResponderExcluir
  16. Amei o tutorial ! mas eu não consegui colocar , porque na hora de pesquisar , eu não achei nada !

    ResponderExcluir
    Respostas
    1. Vc tem que escrever "..."
      E apertar a primeira setinha e entao pesquisar os codigos.
      Espero ter ajudado;
      Beijos

      Excluir
  17. Sou o Unico Menino que Curte Seus Tutoriais ? Brigadão, Seus Tutoriais são os Melhores !

    ResponderExcluir
    Respostas
    1. Oi Eder, ja passaram alguns meninos por aqui sim.
      Obrigada por gostar dos tutorias. Se precisar de algum pode pedir que eu posto.
      Beijos e obrigada

      Excluir
  18. Muito Obg..
    Visitem meu blog e se poder virem PARCEIRAS
    BEIJINHOS...
    http://palomacfbonani.blogspot.com.br/

    ResponderExcluir
  19. Oii Giselle, deu super certinho o tuto, era o que eu tava precisando, vlw dmaiiiis ! Bjao

    ResponderExcluir
  20. Muito útil seus posts, me ajudou muito, e funcionou.
    Vallew ae.

    ResponderExcluir
  21. tem um problema, eu coloco as cores tudo certinhas,dai quando salvo ñ fica! O que eu faço?

    ResponderExcluir
  22. faz um tuto de como mudar a cor quando o mouse passa em cima da palavra do blog

    ResponderExcluir
  23. Obrigada me ajudou bastante ! Visitarei este blog mais vezes obrigado
    Visite : http://perfumebasico.blogspot.com.br/

    ResponderExcluir
  24. Obrigada! Amo seu blog e seus tutoriais. Parabéns! Bjs!!!

    ResponderExcluir

Deixe um recadinho sobre o blog. Obrigada!

Related Posts Plugin for WordPress, Blogger...