05/06/2017

Tutorial: Adicionando barra de rolagem na horizontal com CSS

||

Ohayoo bunnie's! Hoje venho mostrar como adicionar barra de rolagem na horizontal com CSS simples, existe meios diferentes de se fazer isso, dependendo de qual elemento ira usa-lo. Ex: menu, imagem, caixas, gadgets etc... Porém vou ensinar como adicionar em caixas ou menus, podendo adapta-lo ao que desejar, assim que compreender bem os códigos. Aqui na postagem deixarei um exemplo, basta seguir abaixo.



OBS: As barras de rolagem do meu blog são personalizadas, então talvez em seu blog fiquem no modo padrão ou personalizadas se estiverem ativas no html do seu blog. 
Como disse existe diversas formas de fazer isso mas todos utilizam algum desses elementos: display:inline-block, white-space:nowrap e overflow-x: scroll ou overflow-y: hidden. Futuramente farei uma postagem explicando um pouco sobre cada um e em que diversas coisas podem se utilizar, mas o que é importante para esse tutorial é só entender isso:
    nome do elemento { //aqui pode ser outro elemento específico que quiser
    overflow-x: hidden; //se realmente quer impedir que tenha uma barra vertical.
    overflow-y: scroll; //pode-se usar auto para deixar o browser decidir quando usar.
    white-space: nowrap; //não deixa quebrar a linha
    }
Só isso! Esquece todo resto. 

Agora sim, vamos ao tutorial. Lembrando que aqui vou mostrar como adiciona-lo a um menu com imagens, mas usando esse mesmo tutorial pode adicionar em vários outros elementos. Vamos começar do zero, começando com um menu simples. Esse é seu corpo:
.menu {
width: 200px;
background: #ccc;
float: center;
text-align: center;
font-family: 'Georgia';
font-size: 19px;
color: #000;
}

Para adicionar a barra horizontal basta adicionar o seguinte código dentro do menu, de preferencia no inicio dos códigos.
overflow-x: scroll;
overflow-y: hidden;
height: 200px;
white-space:nowrap;
Ficaria assim:

.menu {
overflow-x: scroll;
overflow-y: hidden;
height: 200px;
white-space:nowrap;
width: 300px;
background: #ccc;
float: center;
text-align: center;
font-family: 'Georgia';
font-size: 19px;
color: #000;
}

Vermelho: Nome do menu
Laraja: Elementos da barra
Azul: Css do menu (corpo do menu)
Verde: Chaves (abre o menu e fecha ele)

E basta adicionar o javascript onde desejar, seja postagem ou Gadgets. Caso não saiba como abrir um novo gadget, basta ir em Layout>> Adicionar um Gadget>> HTML/JavaScript HTML e dentro dele por o seguinte código:
<div class="menu">Aqui vai texto ou conteúdo</div>
Salve e pronto!

Viu? Simples! Porém esse é só o corpo simples, se desejar adicionar imagem, deve criar uma segunda tag. Que seria o nome do meu + img, ficaria assim:

.menu img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}
.menu {
codigos da barra
codigos do menu
}

Agora o código javascript fica um pouquinho diferente, ficara assim:
<div class="menu"><img src="Endereço da imagem" /> Aqui vai texto ou conteúdo</div>

Agora é só adicionar o javascript onde desejar, seja postagem ou Gadgets. Caso não saiba como abrir um novo gadget, basta ir em Layout>> Adicionar um Gadget>> HTML/JavaScript HTML e dentro dele.

Se desejar adicionar na sidebar, postagem ou outros códigos é só copiar o elemento da barra de rolagem e colar dentro da área que deseja. =) Essa foi a postagem de hoje, espero que tenham gostado, seja útil e fácil de entender. Se tiver qualquer dúvida ou dificuldade basta comentar, terei todo prazer em lhe ajudar. Até aproxima!

6 comentários:

  1. Hannah Beth6/7/17

    Não conhecia esse método deve ficar legal para disponebilizar download

    ResponderExcluir
    Respostas
    1. Sim, sim. Além de economizar espaço.

      Excluir
  2. Anônimo15/7/17

    Que legal! É possível personalizar a caixa? Assim colocar imagem no fundo? Botões?

    ResponderExcluir
    Respostas
    1. Tem sim! =D É só acrescentar no CSS dele.

      Excluir
  3. Hannah Beth15/7/17

    É possível utilizar para amostra de themes d tumblr?

    ResponderExcluir
    Respostas
    1. É possível sim. Só precisa fazer algumas adaptações para isso.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram