como colocar um menu horizontal com caixa de busca no blog

Hoje mostrarei como colocar um menu horizontal com caixa de busca no blog, esse menu é bem fácil de aplicar no blog.

Primeiro acesse o HTML do seu blog, vá em MODELO>> depois em Editar HTML>> e em Prosseguir



Agora você vai pressionar as teclas Ctrl + F (Tecla de pesquisa) do seu teclado e buscar por esse Tag:
]]></b:skin>

Quando encontrar o Tag logo acima dele acrescente esse 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;}


Pronto já adicionamos o CSS do menu, agora vamos adicionar o Menu

Agora procure por essa Tag: </header>

Logo abaixo dele acrescente esse código:

<!-- Menu Superior -->
<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='Perfil Blogger'>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 superior -->

Esse foi o Script do menu, agora é preciso que você altere o código.


Veja que nesse segundo código tem destacado algumas partes em cor azul você coloca o link da sua página.

Em cor Preta "negrito" você coloca o título da sua página.Se você for mudar as cores do menu é preciso que você faça essa alteração no código CSS do menu.