Links lado a lado (menu horizontal)
Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas linhas de CSS, se quiser fazer o mesmo com imagens veja aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets. Além disso uma outra forma de colocar um bonito menu no seu blog é usar um menu accordion no blog (menu sanfona).
Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:
<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;
}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>
Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.
No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.
A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.
As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.
Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:
<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;
}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>
Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.
No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.
A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.
As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.
Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Marcadores: Códigos, Configurações Avançadas, Scripts, Template