12 de jul de 2011

Instalar menu horizontal no novo Blogger

Com um menu você poderá organizar suas redes sociais, por exemplo


No painel de entrada do Blogger, clique no ícone de setinha, ao lado da casinha. Ao abrir a janela, clique em "Modelo"








Agora clique em "Editar modelo"





Agora procure por:



]]></b:skin>


Agora cole este código acima dele


#navcontainer
{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
}

ul#navlist{
height: 20px;
list-style: none;
padding: 10px;
margin: 0 auto;
width: 90%;
font-size: 0.8em;
}

ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2x;
}

ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ccc #cccc #ccc #fff;
border-style: solid;
color: #000;
text-decoration: none;
background: #eee;
}

#navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }

ul#navlist li#active a{
background: #ccc;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
}


*CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER.



Se você quer o menu acima da header (cabeçalho)

Agora procure pelo seguinte código:  

<div class='header-outer'>

E cole este código abaixo depois (abaixo) dele.


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>



Se você quer o menu abaixo da header (cabeçalho)


Procure por:


 </header>

e cole o código abaixo dele.


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>



Salve e depois faça as modificações como cores, inserir links salvando novamente


    11 comentários:

    1. Muito bom.. parabéns ae cara xd

      ResponderExcluir
    2. Amigo,eu fiz mas os menus ficaram verticais.. devo ter feito algo errado né? rsrs

      ResponderExcluir
    3. Gostei, consegui colocar o menu com êxito. Agora gostaria de saber como centralizar os títulos dentro da caixinha.
      Sem mais,
      Obrigado (antonio.comerciario@gmail.com)

      ResponderExcluir
    4. Oi como muda a cor do link? é na edição ou no design do modelo ja faz isso?

      ResponderExcluir
    5. - Fiicou ótiimo õ/ . Obrigado *--*

      ResponderExcluir
    6. uhhhhhh vlw cara vc é demais muito obg.
      com esse codigo consegui colocar a imagem de fundo do menu do jeito que eu queria vlw
      obg
      estou editando e ta ficando daora

      ResponderExcluir
    7. a so mais uma coisa. nao tem como aprocimar mais o menu com as postagens ?

      ResponderExcluir
    8. :ar! No meu blog eu não achei a casinha :/

      ResponderExcluir
    9. Oi,ñ estou conseguindo toda vez apareçe :
      Erro ao analisar XML, linha 3, coluna 107: Element type "html" must be followed by either attribute specifications, ">" or "/>"
      Pode me ajudar ?

      ResponderExcluir

    A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


    Copyright © Templates e Acessórios |
    Design by Elke di Barros | Tecnologia do Blogger
      Twitter Facebook Google + YouTube