Cursos 24 Horas - Cursos 100% Online com Certificado

Menu Horizontal com Caixa de Busca - Blogger/Blogspot

17 Comentários Autor : Notícia e blog 16 dezembro 2009


Um menu horizontal é a forma mais fácil de organizar seus links principais, facilitando o leitor a encontra-los, a caixa de busca também é uma forma de ajudar a buscar o que procura-se mais rapidamente sem ter que ficar navegando muito na página para achar. Como os dois são importantes para o blog o melhor é uni-los, é isso que você vai ver neste tutorial abaixo:

Dando Estilo ao menu

1.Acesse o painel do Blogger (blogger.com)
2.Vá para "Layout"->"Editar HTML"
3.Procure pelo trecho abaixo em seu template "Utilize Ctrl e F":
]]></b:skin>
Antes do trecho acima adicione o código seguinte referente a CSS:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

Inserindo o menu

4.Agora vamos inserir o menu no template, procure pelo seguinte código:
<div id='header-wrapper'>
Abaixo dele adicione o seguinte código:
<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='/'>Ínicio</a></li>
<li><a href='http://url-do-seu-perfil-do-blogger' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='/feeds/posts/default' title='Assine o Feed'>Assine o Feed</a></li>
<li><a href='mailto:seu-e-mail@hotmail.com' title='Contato'>Contato</a></li>

<li><a href='/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas as postagens</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fim Menu superior -->

5.Substitua os trechos em negrito pelas respectivas urls.
6.Salve as alterações e visualize.

Referência:El Escaparate

    17 Comentários

    Iuri Rodrigues disse...
    29 de dezembro de 2009 05:53 #

    vc é um genio cara valeu mesmo!!!

    EGDomingos disse...
    2 de setembro de 2010 01:22 #

    Boa noite!
    Achei bem interessante todos os seus posts, e agradeço por disponibilizá-los para nós, principalmente eu, que sou iniciante em blogs, venho testando todos os seus códigos e funcionam perfeitamente, só me deparei com um problema recentemente em um dos códigos que foi no momento de inserir o menu, e reparei que esse código do cabeçalho não existia na forma que você postou no meu templante, e fazendo testes consegui encaixar o código do menu logo abaixo desse código que demonstro aqui embaixo. Não tive tempo de testar, mas pelo menos consegui inserir o código e visualizar no meu blog. Não sei se irá funcionar, mas gostaria de estar lhe inteirando quanto a dificuldade com a qual me deparei. Sou totalmente leigo, mas gostaria de sua ajuda quanto a funcionalidade desse código agora com um pouco de diferenciação das suas instruções.





    Desculpe-me se alonguei demais, e desde já agradeço por toda ajuda. Obrigado!!!

    EGDomingos disse...
    2 de setembro de 2010 01:26 #

    Não sei por qual o motivo os código que citei no comentário acima não estão visíveis, ficando praticamente nula a minha tentativa de informação, mas desde já agradeço a atenção. Obrigado!

    David disse...
    12 de setembro de 2010 11:34 #

    po man o que falar so da vontade de dar um beijo na sua boca kkkkkkk

    Ae post muito bom escelente me ajudou muito!

    Podem fazer que funciona gente!!!

    Cachorro sem Faro disse...
    8 de novembro de 2010 17:13 #

    Muito legal!

    Realgiga disse...
    1 de fevereiro de 2011 03:06 #

    kkkkkkkkkkkkkkk David disse..(da vontade de dar um beijo na sua boca )haha.

    muito bom post
    Obrigado!!!

    Vitoria Portes disse...
    5 de março de 2011 12:01 #

    Gente por deus, eu não encontro de forma alguma a tag

    div id='header-wrapper'

    Como faço agora?

    Rivânio Sousa disse...
    20 de março de 2011 07:14 #

    Cara o post tá muito bom, mai eu queria saber como faço para descer um poco essa barra, pois a minha barra ficou lá em cima, já consegui mudar a fonte, a cor mais não consigo baixar a barra pra depos da imagem do titulo, então desde já agradeço a ajuda.

    Anônimo disse...
    26 de abril de 2011 17:07 #
    Equipe Web Designers 83 disse...
    29 de abril de 2011 08:45 #

    post boom '

    acessem
    xtech-downs.blogspot.com

    matheus disse...
    17 de dezembro de 2011 15:40 #

    cara eu não consegui achar o segundo código que você mandou procurar, se você puder me ajudar com isso eu agradeço.

    Flavia disse...
    19 de abril de 2012 12:56 #

    Não localizei o código. O que fazer nesse caso?

    Flavia disse...
    19 de abril de 2012 12:59 #

    Uma pena que as dúvidas não são respondidas. Desisto.

    vitor disse...
    28 de abril de 2012 14:49 #

    nao entedi qual codigo

    Alex|Mendes disse...
    13 de maio de 2012 16:45 #

    queria saber o seguinte... coloquei tudo direitinho.. não avi achado o código mas deu certo... e queria saber uma coisa... a barra ficou.. mas logo abaixo fica uma especie de margem em branco... como tiro ela?? fica assim oh:

    •Barra
    (Espaço em branco)
    •banner

    Porfírio in Vintage Blog disse...
    21 de agosto de 2012 22:04 #

    FAzer tutorial é fácil né, receber 20...30 c0mentários mais ajudar de fato o leitor do blog isso não acontece e não é só esse blog não, vejo muitos por ai que sai disponibilizando tutoriais e qnd surgem dúvidas eles (autores) não dão a minima para os questionamentos e vejo até alguns blogs que postamm tutoriais errados só pra terem um publico que na verdade os autores não respeitam!
    Fazer o quê? Deixar de frequentar esse tipo de blogs e simplesmente deixar de comentar!

    Natalia Oliveira disse...
    30 de agosto de 2012 11:30 #

    Não encontrei no meu blog o segundo trecho que pede para localizar o que faço?

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.