sexta-feira, 19 de agosto de 2011

Como inserir um Menu abaixo do cabeçalho do Blogger



Neste tutorial você vai aprender a adicionar um menu bem simples logo abaixo do cabeçalho do seu blog. O procedimento foi testado no Template "Mínima" do Blogger, podendo ocorrer que as linhas de código sejam diferentes conforme o modelo que você usa.
Então, vamos lá...

No final, a aparência do menu deverá ficar conforme a imagem abaixo:



1º Passo) - No painel do Blogger, clique em "Design/Editar HTML" e procure pela seguinte linha de código:

]]></b:skin>

Acima dela copie e cole o código abaixo:



/* Codigo CSS do Menu Horizontal
--------------------------------- */
#navigation{
height:40px;
width: 920px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(http://img840.imageshack.us/img840/6816/fundomenu2.jpg) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:0px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-family:Arial;
font-size:16px;
font-weight:bold;
text-transform:none;
text-decoration:none;
background-color:inherit;
color: black;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:none;
color:white;
text-decoration:none;
}

2º Passo) - Agora, procure pela linha de código </header> e cole logo abaixo dela o código:



<!-- Menu Horizontal -->

<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>Home</a></li>
<li><a href='inserir link aqui' title=''>Noticias</a></li>
<li><a href='inserir link aqui' title=''>Artigos</a></li>
<li><a href='inserir link aqui' title=''>Editais</a></li>
<li><a href='inserir link aqui' title=''>Apostilas</a></li>
<li><a href='inserir link aqui' title=''>Resumos</a></li>
<li><a href='inserir link aqui' title=''>Simulados</a></li>
<li><a href='inserir link aqui' title=''>Dicas</a></li>
</ul>
</div>

<!-- Fim do Menu Horizontal -->


Os textos em azul deverão ser substituídos pelos respectivos links (urls) das páginas do seu blog.

Depois é só salvar e pronto!

Nenhum comentário:

Postar um comentário

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!