03/02/2012

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.



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:


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

9 comentários:

  1. AHH AMEI AMEI AMEI O LAYOUT, O BLOGGER OS POSTS, TUDOO~ me apaixonei, de verdade. Ameei! Kissu me ensina? OwO estou toda a ouvidos (brincadeira ta?) kiss

    ResponderExcluir
  2. @plafrese (pseudônimo)
    Nyaaa~ obrigada *W*!
    Que bom que você gostou fico super feliz com isso >u<.

    Kissuus

    ResponderExcluir
  3. (*0*) Ohhh~ Kawaii (>w<)
    Adorei o tuto camicamii-chan!!
    Haah Σ(‘0‘@) ...Honto...~ por que existimos ~ ?
    *pensa*
    oiiii Alieeeeens ~~~ヾ(^∇^) -QQQQQQQ

    (e.e) etto..."Sofia-chan"?
    (= =')Hehe..gomen...demo..quem (OO)?

    Nyaaanpa (0w0) Arigatoo nee!!
    kkkkk Hai gosto bastante do Soka... MÁS O APA É INSUPERAVEEELLLL -QQ
    (_ _)^w^)_ _)^w^) HAI! (UvU) eu gosto bastante do Harry...más o Ed não pode ser vencido (=w=)/~

    rsrs não tem problema (OwO)/ eu também escrevo bastante (_ _'') Gomen m(_ _)m
    Nyaan Nyaan...domo arigatoo por comentar!! (>w<) fico muito feliz quando comentam (0w0)

    Kissus (=3=)/ ~
    Sayo ~ nee

    ResponderExcluir
  4. Gomeeeeeen Okami-chaan >/////////< é que... etto.... eu estava conversando com uma amiga minha aqui, aí eu acabei te chamando assim .u. . Eeer, eu realmente realmente peço desculpas, eu percebi só depoos de ter comentado e fiquei pensando "Waaa eu chamei ela de Sofia? Eu confundi as pessoinhas!! E agoraa que vergonha Waaa² ~morri~" e foi isso que aconteceu :c. Masmas, obrigada por vir aqui e não ficar brava por eu ter feito confusão = 3 =, te devo eternamente -q.
    Nyaa~ eu gosto quando as pessoas escrevem muito mas acho que as pessoas não gostam quando eu escrevo muito ç_ç.
    É sempre um prazer comentar seus posts Okami-chan :3.

    Kissuuuuuus

    ResponderExcluir
  5. Hola muchas muchas gracias por apoyarme con un puntito mas de seguidora realmente lo aprecio ps me encanta pokemon :3

    ResponderExcluir
  6. @camicamii-chan
    kkkkkkkkkkkk não tem problema (>w<)/
    kkkkkkkkkk
    Kawaii (*w*) fui confundida com uma amiga da Cami-chan (*0*) (>//<)
    Rsrs Yee Yee!! Eu gosto muito dos seus coments (>w<) (tudo bem que eu só vi um.... demo foi tão kawaii, e engraçado desuu (*0*)/)

    Kkkk não precisa dever eternamente rsrsrs~

    (*0*) Kawaii (>w<)
    Arigatooo!!
    O prazer é meu, por ter tido a sorte de conhecer um blog tão kawaii (*w*) e poder fazer parceria com ele (>w<)/~

    Ahh AHh a proposito cami-chan (00)
    você gosta de Pokemon né? (o>w<o) nyaan o Pikashu é tào kawaiii!! rsrs

    Kissus Kissus~
    Ahhhhhhh (e e') meu coment ficou grandão.... gomen m(_ _')m

    Kissu ♥

    ResponderExcluir
  7. @Aria loveless Hoola C:! Oh, no tienes porque agradecer me. Tu blog es precioso *U*!!
    Tambien me encanta Pokémon hihi :3.


    3 Kissuus

    ResponderExcluir
  8. O meu não foi '¬¬, pq os meus nunca funcionam?? hahahah, serio

    ResponderExcluir
  9. @Lah
    Hmm sério? Vou ver aqui se os códigos estão todos certinhos e depois que testar te aviso ok? ^ u ^

    Kissuuus :3

    ResponderExcluir