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.

Aqui vai um exemplo de menu e imagens em barra rolante na horizontal.

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:

Códigos

    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. 

1. 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:

Códigos

.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.

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)

2. 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:

Códigos

<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:

Códigos

<div class="menu"><img src="Endereço da imagem" /> Aqui vai texto ou conteúdo</div>

3. 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!