segunda-feira, 10 de outubro de 2011

Menu horizontal – Tema Apple

image
Como você pode ver na imagem, este menu nada mais é do que um menu na horizontal com o tema Apple. O menu é muito parecido com o original contido no site da Apple e se adapta perfeitamente em blogs de tecnologia. Todo menu tem como principal função, criar links para facilitar a navegação do leitor, mas este vai além, ele exibe uma caixa de busca no canto direito do menu, facilitando ainda mais a navegação do visitante. Encontrei este menu no site Coswyn, mas creio que muitos têm dúvidas de como aplicar no blog e a partir de agora você vai aprender a colocar no seu. Lembrando que o menu ficará localizado na parte superior da sua página.
Menu horizontal - tema apple
1. Acesse o “Editar HTML” do seu blog.
2. Procure por:
]]></b:skin>
3.  Acima dessa tag cole o código abaixo:
div.nav { 
    margin: 18px auto 0px auto;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    display: table;
}
div.nav ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #9f9f9f;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e));
    background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
    display: inline-block;
    list-style: none;
}
div.nav ul li {
    margin: 0px 1px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
    float: left;
}
div.nav ul li:first-child {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
    margin: 0px 1px 0px 1px;
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
    float: left;
    /*-*/
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #252525;
    text-shadow: #cecece 0px 1px 0px;
        text-decoration: none;
}
div.nav ul li:first-child a {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#535353));
    background: -moz-linear-gradient(top,  #929292,  #535353);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#535353');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    -webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    -moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
    padding-right: 34px;
}
div.nav ul li.selected {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    background: -webkit-gradient(linear, left top, left bottom, from(#373837), to(#525051));
    background: -moz-linear-gradient(top,  #373837,  #525051);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373837', endColorstr='#525051');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
    padding-right: 34px;
}
/*-----*/
div.nav ul li.logo a {
    padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
    padding: 5px 35px 7px 35px;
    border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }
/*-----*/
div.nav ul li.search a {
    padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
    width: 120px;
    height: 17px;
    padding: 0px 0px 0px 20px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #888 #b0b0b0 #dedede #b0b0b0;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #fff url(http://work.coswyn.com/apple_nav/button_search.png) no-repeat 5px 3px;
    /*-*/
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a {
    margin: 0px 1px 0px 1px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
    padding: 8px 9px 9px 7px;
}
4. Agora pesuise por <body> e abaixo dessa tag cole o seguinte código:
<div class="nav">
    <ul>
        <li class="logo"><a href="#"><img src="http://icons.iconarchive.com/icons/tatice/cristal-intense/32/Apple-grey-icon.png" border="0" /></a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li> 
        <li class="search"><a><form action='/search' id='pesquisar-in' nmethod='get' style='display:inline;'><input class='pesquisar' id='search-box' name='q' type='text' value='Pesquise...'/></form></a></li>
    </ul>
</div>
5. Agora é só modificar as partes em vermelho e depois salvar.

Marcadores: , , , ,

14 Comentários:

Às 14 de outubro de 2011 18:12 , Blogger Marilucia disse...

Achei muito maneiro, tenho um blog sobre tecnologia e testei colocar este menu, mas deu erro. Apareceu a seguinte mensagem: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.

Error 500

 
Às 14 de outubro de 2011 20:36 , Blogger Códigos Blogger disse...

Marilucia, ainda bem que exite pessoas como você! Arrumei o código. Apenas refaça o tutorial. =D

 
Às 14 de outubro de 2011 20:45 , Blogger Marilucia disse...

Deu certo, mas teria como aumentar o tamanho do menu para se adequar ao tamanho do layout?

 
Às 14 de outubro de 2011 22:03 , Blogger Códigos Blogger disse...

Da sim, apenas acrescente o seguinte trecho abaixo de div.nav {

width: 100%;
text-align: center;
background: -webkit-gradient(linear, left top, left bottom, from(#CACACA), to(#848484));
background: -moz-linear-gradient(top, #CECECE, #8C8C8C);

 
Às 30 de outubro de 2011 14:14 , Blogger Adm. disse...

Ola adcionei a barra de menus no meu blog so que nao consigo add um link externo ,exemplo=
coloco o link na parte vermelha ao que fica da seguinte forma= www.meusite.com e o link adcionado junto entende gostaria de adcionar no menu links de fora do meu blog nao puxando prlo dominio principal e possivel..

 
Às 30 de outubro de 2011 21:50 , Blogger Códigos Blogger disse...

Você tem que colocar o link completo com http://

Exemplo: http://www.cblogger.net/

 
Às 7 de novembro de 2011 20:13 , Blogger Propretario do Link disse...

Não consegui encontrar o código ]]> oque eu faço??

 
Às 8 de novembro de 2011 02:29 , Blogger Wilson disse...

Eu colokei, mas meu menu foi la para baixo
http://profile-example.blogspot.com/
arruma para mim?
add seu email e eu te add como admin no site
:)

 
Às 8 de novembro de 2011 08:16 , Blogger Códigos Blogger disse...

Proprietário do Link e Wilson, façam o seguinte:

1. Abram o Editar HTML de seus blogs
2. Procurem por <body> e abaixo dela digitem:


<style>

</style>


3. Entre as tags "style" cole o código da segunda caixa de código (código CSS) deste tutorial.

4. Visualizem e vejam se deu certo, se sim, salve.

 
Às 8 de novembro de 2011 14:56 , Blogger Propretario do Link disse...

Não consegui novamente, e quando aperro Ctrl-f não acha o body oque eu faço?Já tentei em outro computador mas não acha.Oque devo fazer?

 
Às 8 de novembro de 2011 15:28 , Blogger Códigos Blogger disse...

procure por <body

 
Às 9 de novembro de 2011 13:15 , Blogger Propretario do Link disse...

Sou eu de novo.Não achei de novo a tag

 
Às 2 de dezembro de 2011 19:13 , Blogger TutoriMac Brasil disse...

Ola , consegui mais nao fica igual ao seu exemplo , so aparece os links e a caixa de busca , tudo solto.

 
Às 17 de dezembro de 2011 23:15 , Blogger tecnoinfobrasil disse...

Cara você vai perder todos seus visitantes caso continue com essa droga de anuncio para se cadastra no site netfilia, ele toma a tela do seu site e não da para ver o conteúdo, é uma dica que lhe dou.

Tenha uma boa noite.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial