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
15 Comentários
vc é um genio cara valeu mesmo!!!
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!!!
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!
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!!!
Muito legal!
kkkkkkkkkkkkkkk David disse..(da vontade de dar um beijo na sua boca )haha.
muito bom post
Obrigado!!!
Gente por deus, eu não encontro de forma alguma a tag
div id='header-wrapper'
Como faço agora?
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.
muito bom
post boom '
acessem
xtech-downs.blogspot.com
cara eu não consegui achar o segundo código que você mandou procurar, se você puder me ajudar com isso eu agradeço.
Não localizei o código. O que fazer nesse caso?
Uma pena que as dúvidas não são respondidas. Desisto.
nao entedi qual codigo
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
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.