7 de janeiro de 2014

Barra de Rolagem e Seleção de Texto - Personalizada.

||
I Need Your Love - Pentatonix

Olá meus amores, tudo bem com vocês? Eu fico feliz que vocês gostaram de Pentatonix, a minha única intenção era essa, haha, trazer mais reconhecimento brasileiro para eles. Quem puder espalhar as músicas deles, eu ficaria feliz. Enfim, eu fico feliz que vocês gostaram do post de ontem, eu fico muito feliz com isso <3 

Bom, hoje eu trago um tutorial simples, quer dizer, dois tutoriais simples, que muita gente sabe, mas mesmo assim, tem pessoas que não sabem. Eu trago Barra de Rolagem e Seleção de texto personalizadas, uhu. Para quem não sabe, barra de rolagem é isso aqui. E seleção de texto, é, tipo, sabe quando você arrasta o mouse, não, pera, é a seleção de texto. Não sei como explicar. Quando você não tem ela personalizada, ela é azul. Enfim, quer ver? Continue Lendo.

1°: Vá para o painel do seu blog, modelo, editar HTML e pesquise a tag "]]></b:skin". Quando achar, cole ACIMA dela o seguinte código:
/*------ Seleção Personalizada ------*/
::-moz-selection {
background: #cordefundo;
color: #cordafonte;
text-shadow: 1px 1px 0px #cordasombra;
}
::selection {
background: #cordefundo;
color: #cordafonte;
text-shadow: 1px 1px 0px #cordasombra;
}
/*------ Seleção Personalizada ------*/
E se você quer a barra de rolagem, cole este:
/*------ Barra de Rolagem ------*/
::-webkit-scrollbar-thumb:vertical {
background: #cordapartemovel;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #cordapartemovel;
}
::-webkit-scrollbar {
width: 5px;
background: #cordapartefixa;
}
/*------ Barra de Rolagem ------*/ 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Explicando: 
Seleção de texto:  Você deve mudar apenas as cores, ok? O "text-shadow" é a sombra do texto, se você não quer, apague apenas a linha dele. "color" é a cor da fonte e "background" é o fundo.

Barra de Rolagem: "::-webkit-scrollbar-thumb:vertical {" parte vertical, ou seja, a parte que é normalmente vista, a que vai descendo para cima e para baixo. "::-webkit-scrollbar-thumb:horizontal {", a parte horizontal, que desce de lado. Para cá << e para lá >>. "::-webkit-scrollbar {" a parte sólida que não se move. O resto todo se move. Os dois primeiros backgrounds é da parte que se move, ou seja, a cor da parte que se move. O último background é da parte fixa, da parte que não se move. Width é o tamanho, a finura da parte fixa. Aumente para ficar mais grossa, deixe assim para ficar mais fina.

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

Bom amores, o tutorial foi esse. Espero que tenham gostado <3 Até mais. (Lembre-se: Se for repassar ou usar, créditos, obrigada)

35 comentários:

  1. Gostei dos tutoriais, sempre uso *u*
    Pentatonix são ótimos, vou divulgá-los para meus amigos <3
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Obrigada <3 Eba, eu fico muito felix com isso, eles merecem.

      Excluir
  2. Ótimo tutorial! Esse fica bem legal =)

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  3. Eu conheci pentatonix uma vez no tumblr, achei super bacana esses efeitos e pá, foi bem legal você mostrar aqui.
    Esses tutoriais ai são muito, muito importantes, e quando usados certo, deixam um ar mais bonito no blog :3
    Beijos~

    ResponderExcluir
    Respostas
    1. Eles só usam a vozes deles, então é sem efeitos, que bom. É verdade, obrigada :3

      Excluir
  4. Que útil esse tuto, pois podemos personalizar os dois sem sair de um blog para o outro ^^
    Vai ajudar muitos :3 Pentatonix é muuito massa, não conhecia até ver seu post, acredita? O.O
    Beijos~
    teenagethiings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. É, obrigada <3 Acredito, pois eles são mais conhecidos no Reino Unido. Eba <3 Que bom que gostou deles.

      Excluir
  5. Já conhecia os tutos, deixam o layout com uma outra cara apesar de serem bem simples :3 Eu estou com essa música (I Need Your Love) desde ontem UAHSUAHSUA' Beijos..
    - http://excepti-on.blogspot.com.br/

    ResponderExcluir
  6. adorei vou tentar os 2

    Bjuuu
    Juliana Medeiros
    umabonecamasnaodeporcelana.blogspot.com.br
    facebook.com/UmaBonecaMasNaoDePorcelana

    ResponderExcluir
  7. Tutos perfeitoos >3< Adorei o da barrinha fica muito fofo o blog, tipo o seu ^^
    http://secretempir-e.blogspot.com.br/

    ResponderExcluir
  8. O tuto é realmente muito útil para quem está começando a usar o html.Adorei o post.
    Estou seguindo o blog, retribui?

    Kiss! Paradise Kawaii | Espero sua visitinha.

    ResponderExcluir
  9. Eu fiquei impressionada com o Pentatonix, sério *u*. Esses tutoriais são simples e ótimos, realmente fazem diferença no Blog >3< Karla, seu blog vai estar no próximo "Recomendo" Do Blog *0* Não sei teve sentido eu falar isso mas tudo bem.

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eles são ótimos, perfeitos, f*das. E ainda são gente boa <3 Verdade. Muito obrigada <3 Que fofo :3

      Excluir
  10. Esses post sempre ajudam !
    www.unhasebocas.blogspot.com.br
    www.facebook.com/pages/Unhasbocas/477832645611169

    ResponderExcluir
  11. Eu adoro seleção colorida fica tão legal 'aushauh'
    só não uso a barra de rolagem personalizada, porque tenho mania de descer a página na flechinha do PC ai trava, fico p*ta da cara. -ignores

    Seguindo, Kisses!

    inside-oficial.blogspot.com.br

    ResponderExcluir
  12. Adorei o tuto, blog lindo.

    Seguindo aqui, retribui?
    http://www.wondermarcelo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada :3 Se eu gostar, sim, e amor, por favor, não comente com o "http://", isso não irá mostrar o seu link diretamente, e, é spam. Tanto a sua conta quando o meu blog podem ser banidos.

      Excluir
  13. Oiee o tuto está otimo.
    Mandei um novo tag, dessa vez nao tem como negar, :v
    A e falaram sobre o seu blog, em um blog de anônimos para criticar pessoas, eu achei muito idiota, eles não tem argumentos, e não pense que fui eu, só estou te avisando
    Este é o link do blog: http://deteste-d.blogspot.com.br/
    Este é o meu :http://colorfulunicornlu.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que ótimo, vou ver a tag :3 Ok, eu não ligo, obrigada por me avisar <3

      Excluir
  14. Eu conheci o Pentatonix pela primeira vez quando escutei uma música da Lindsey Stirling com eles *-* E eu os amei. Nha, trazer dois tutoriais úteis por um postagem só fica bem legal, viu? Além do mais eu não dispenso uma seleção de texto, até porque deixa o blog muito mais fofo <3 Ah, Karla já coloquei o Etc for me nos afiliados! <3
    TMR DGs!

    ResponderExcluir
    Respostas
    1. Eles são ótimos <3 Verdade, muito obrigada <3 Vou colocar você agora :3

      Excluir
  15. Esses tutoriais são incríveis, já apliquei uma vez em meu blog. :)

    Twitter Blog
    - xoxo –

    ResponderExcluir
  16. A som de Pentatonix é bem maneiro Karla! Adorei os tutoriais, nunca dispenso a seleção de texto u3u nem sempre eu uso a barra de rolagem personalizada, dá mó preguiça D:

    Retribui? || Unskilled

    ResponderExcluir
  17. Já conhecia esses tutoriais, mas mesmo assim, amei sei blog ! *u*
    www.go--on.blogspot.com

    ResponderExcluir

Vai comentar? Obrigada Mas antes, leia por favor:

Os comentários são moderados para eu saber quem comentou, assim posso retribuir, somente por isso ok? Pode comentar o que quiser, até criticas e ofensas, mas mantenha o respeito.
Leia o post todo antes de comentar, não comente apenas para divulgar o seu blog.
Se for colocar o link do seu blog, coloque sem o "https://", pois o blogger considera spam.
Não precisa comentar "Seguindo, segue de volta?" Se eu gostar, eu sigo.
O resto pode fazer :3 Mas tenha respeito.

Obrigada novamente