Menu Horizontal com caixa de busca para o seu Blog

Vou mostrar a como colocar um "Menu Horizontal com caixa de busca" no Blog...

[TUTORIAL ATUALIZADO  PARA NOVA INTERFACE DO BLOG]

Este menu horizontal é editável e você pode adicionar qualquer link ou página do Blog para ser exibido no Menu. O legal é que, você poderá mudar as cores do menu e deixá-lo combinando com as cores do template Blog.
Para colocar este Menu no Blog é fácil, porém, será preciso inserir alguns códigos no HTML do Blog.

Veja um exemplo do Menu na imagem abaixo. (clique na imagem para visualizar):

Menu Horizontal com Caixa de Busca para Blog

Vamos começar!

1º Passo: Acesse o painel de edição do seu Blog, e clique na opção Modelo >> depois em Editar HTML.

2º Passo: Agora, clique em qualquer parte do código, em seguida, pressione as teclas de atalho "Ctrl+F" do seu Teclado e busque por esta Tag:

]]></b:skin>

3º Passo: Após encontrar a Tag, logo acima da mesma acrescente este código CSS do Menu: 

/*-- CSS do Menu Horizontal-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font: bold 14px "ms sans serif",Gill Sans, sans-serif; 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: #4F4F4F; 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;}
/*-- Fim do CSS do Menu Horizontal-- */

4º Passo: Vamos procurar no código outra Tag, então, utilize novamente o atalho "Ctrl+F" e encontre esta Tag:

</header>

5º Passo: Depois de encontrar a segunda Tag, logo abaixo dela acrescente este código (código Script do menu):

<!-- Menu horizontal -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='/'>Ínicio</a></li>
<li><a href=' http://link da página 1' title='Contato'>Contato</a></li>
<li><a href=' http://link da página 2' title='Sobre'>Sobre</a></li>
<li><a href=' http://link da página 3' title='Parceria'>Parceria</a></li>
<li><a href='http://link da página 4' title='Mapa do site'>Mapa do site</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 horizontal -->

• Depois de adicionar o Script do Menu Horizontal, vamos ter que EDITAR, para isso, siga as instruções mostradas abaixo

Editando o Menu Horizontal 

Veja que eu destaquei o código em cores diferenciada, isto, para facilitar o entendimento na hora de editar.

• A parte que esta destacada em Azul, é para você substituir pelo link da página.
• Em cor Vermelho, é para você colocar o "Título" da página.

Observe: Veja um exemplo da alteração:

<li><a href='http://variasdicasparablogs.blogspot.com.br/p/contato.html' title='Contato'>Contato</a></li>  

 Alterando as cores do Menu

Se você deseja mudar as cores do menu, veja como fazer.

• ´Para alterar a cor de fundo do Menu: substitua a parte destacada em Azul "#dcdcdc" pelo código da cor em HTML que deseja colocar. (clique aqui para escolher uma cor em HTML).
• Cor da Letra: Substitua a parte destacada em cor de Rosa "#737374" pelo código da cor em HTML . (clique aqui)
• Quando passamos o cursor do mouse sobre uma opção, a cor do fundo muda, e para alterar a cor do segundo fundo, basta substituir a parte destacada em Vermelho "#4F4F4F" por uma outra cor. (clique aqui)
• Cor da leta do link: substitua a parte destacada em cor Verde "#ffffff". (clique aqui)

Prontinho a alteração é só isso, agora clique em visualizar veja se tudo ocorreu bem e depois salve. Obrigado