quarta-feira, 13 de abril de 2011

Como inserir um menu horizontal com caixa de busca no Blogger


Dicas Blogger                                    

(Clique para ampliar a imagem)


>> Código extraído de http://www.infoblogs.com.br/
         Para adicionar o menu, criei um blog de teste (HTTP://teste-smartin.blogspot.com). Na primeira parte, tudo bem; quando chegou no final, um problema: não encontrava a linha de código <div id='header-wrapper'>, simplesmente porque ela não existe!

            Daí, o jeito era “quebrar a cabeça” para descobrir onde inserir a segunda parte do código.

            Pois bem, problema solucionado, estou postando os devidos procedimentos, já testados e em pleno funcionamento. Para ver o demo do menu, acesse HTTP://teste-smartin.blogspot.com.


Procedimento: Faça login no Blogger, vá até design >> Editar HTML. Não clique em “expandir modelos de widgets”.

Procure pela linha de código: ]]></b:skin>

Antes do código acima, adicione o seguinte código em CSS:

Comentário: Nesta parte do código está configurada a aparência do menu (fontes, cores, altura da barra de menu, enfim, todo o “layout” do seu menu está definido aqui).


/*-- 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;}

Agora, vem a parte nova ( a que me deu trabalho...)

Procure pela seguinte linha de código: </header>

Abaixo dela copie e cole o código abaixo:

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

Substitua os trechos em negrito pelas respectivas URLs.

Salve as alterações e visualize.

Qualquer dúvida, estou à disposição.

Abraço!


3 comentários:

  1. o menu é legal,mas não gostei porque ele deixa um espaço entre ele e o cabeçalho :)

    ResponderExcluir
  2. Para resolver esse problema modifique o primeiro parâmetro de "margin" para "-10px" (1a linha do código CSS). Veja como ficou acessando o blog de teste.
    Abraço!

    ResponderExcluir
  3. Olá, boa noite. Gostei muito deste post e me ajudou muito. Muito obrigado. Mas é possível modificar a cor da fonte? Não consegui modificar a mesma. Novamente, Muito obrigado.

    ResponderExcluir

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

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!