14 de jan de 2017

Tutorial simples: Adicionando barra de rolagem em diversas partes do blog

Bem, esse é o primeiro post de hiatus e eu ia dar uma enrolada na intro, mas eu sinto a necessidade de contar pra vocês: Eu oficialmente tenho 1,51cm! Sabe a felicidade do Otani quando ele cresceu tipo, meio centímetro? Não se compara ao quanto estou feliz agora *^* Eu terminei de ler Orange, Hirunaka no Ryuusei, Corpse Party, Lovely Complex e mais uns mangás e também estou acompanhando uns animes da temporada. Ah, até me esqueci! Espero que todos estejam bem ^^
Quando estava planejando os posts do hiatus, eu pensei "por que não aproveitar esse tempo para colocar os pedidos do CT em dia?" e bem, lembrei que há pouco tempo um anônimo pediu que eu postasse modelos de caixinha com barra de rolagem. Foi aí que eu, exagerada, pensei em simplesmente ensinar a colocar barra de rolagem em diversas áreas.

Colocar barra de rolagem em diversas partes do blog

Resultado de imagem para anime scenery gif tumblr

A base do código

O código não é grande, não é complicado e na minha opinião só é um pouco fácil de esquecer.
overflow: scroll;
"MAS O QUÊ??? YUNI, É SÓ ISSO?" Sim, mas provavelmente quando for colado isso no seu código, a área em que tu decidiu colar o código vai ficar com duas barras de rolagem, uma na vertical e uma na horizontal. Para evitar que isso aconteça, temos duas variáveis do código:
  • overflow-y: scroll; / caso queira na vertical
  • overflow-x: scroll; / caso queira na horizontal

Pois então, o código é bem simples, mas para não confundir ninguém, vou colocar alguns exemplos de lugares onde vocês podem adicionar o código pra ele ficar bem bonito e conceitual -q
Imagem relacionada

Adicionar o código à área de postagens

O código da área de postagens pode tanto ser "post-outer {" quanto ".main-inner .column-center-outer {", mas eu recomendo testar nos dois (provavelmente vocês têm só um deles no layout, mas ainda assim testem com o outro) porque eles ficam um pouco diferente e talvez um vos agrade mais que o outro. Esse tutorial é bem conhecido e bem simples, mas dependendo do layout dá um grande charme ao design geral da página.
max-height: NUMEROpx; > também deve ser colocado
Imagem relacionada

Adicionar o código à sidebar inteira

Há duas áreas, ".main-inner .column-left-inner {" e ".main-inner .column-right-inner {" e qual tu vai encontrar depende de qual lado está sua sidebar (logicamente, se tu tiver duas sidebars, terá as duas áreas) e bem, não consigo me lembrar se já tinha o código no meu layout ou se o adicionei por mim mesma. Por via das dúvidas, procurem -q
max-height: NUMEROpx; > também deve ser colocado

Adicionar o código a todos os gadgets individualmente

Para isso, é necessário procurar por ".sidebar .widget {" e adicionar o mesmo código:
max-height: NUMEROpx; overflow-y: scroll;
O código de número corresponde ao tamanho máximo que o gadget pode ter sem usar a barra de rolagem. Isso também vale para caixas de texto,  blockquote e qualquer coisa em que tu quiseres colocar essa personalização.
Resultado de imagem para anime scenery gif tumblr

Adicionar o código ao conteúdo de um gadget sem pegar o título:

A falha do código que eu passei acima é que ela sempre pega o título do gadget junto, o que eu particularmente não gosto. Para que isso não aconteça, o "truque" é criar um código como de uma caixa de texto, porém sem personalização alguma:
caixinha {
max-height: NUMEROpx; overflow-y: scroll;}
E quando for adicionar a um gadget, colocar o código entre as tags de abertura e fechamento, como:
<caixinha>seu conteúdo fica aqui :3</caixinha>

 E bem, esse é o final do tutorial! Espero ter ajudado aqueles que estavam com dúvida sobre esse tipo de coisa, porque eu não gosto muito de postar modelos... Prefiro ensinar como fazer -q Mas caso não tenha ficado claro, eu trarei especificamente um tutorial sobre as caixinhas, ok? Ah, as caixinhas do GNMH são muito úteis para começar a entender o código ^^ Sayonara o/
Imagem relacionada

4 comentários:

  1. Yooo, que saudades tenho de vc no MM onee-chan ¬¬
    O que? Tem 1,51? Tenho 1,53 toma essa hauha. Estou bem e vc? O tutorial é super útil e ... O QUEEEE? É SÓ ISSO? O acabamento fica muito lindo só com esse código pequenininho, testei e recomendo ><

    http://mundo-mikas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ué, mas tu quase não aparece aqui!
      Tenho 1,51, me sinto a baixinha TuT
      SIIM, É SÓ ISSO KSLDJDMNJKSNFKS Fica muito bonito mesmo <3
      Sayonara o/

      Excluir
  2. Se é pra ensinar ensina logo tudo de uma vez né AHUSHUAHSUHAS
    Só observo esse povo sempre baixinho, eu me sinto tão pequena com meus 1,64 aqui KKKKKKKKKKKK
    Já volto pra comentar direito sz

    ResponderExcluir
    Respostas
    1. NÉ, SE É PRA SER PROFESSORA SEJE LOGO -q
      Nossa, sua giganta ;-; me senti anã TuT
      Foi isso que Nagisa disse antes de morrer -q

      Excluir

Sim, eu dei uma reformada marota nisso aqui ~
➹ Não saia ofendendo e nem fazendo comentário de quinta, porque idiotice eu já tenho de sobra
➹ Eu não faço troca de seguidores ou essas coisas ridículas, só sigo se eu quiser
➹ Qualquer comentário que não tiver conteúdo será deletado
➹ Não faço layout por encomenda
➹ Se leu e está ciente de tudo isso, parabains pra você!