Xomo Colocar um Menu horizontal com caixa para pesquisa no Blogger!

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.