Ainda não tive tempo de concluir as edições. O vídeo deve sair ainda esta semana.
► Siga em frente
Download Menu
Primeiro, o passo é o mesmo: Vá até o CSSMenuMaker, e escolha qualquer menu DropDown.
Eu escolhi este aqui: Canopy Menu.
Método 1 (Mais fácil)
Se tentarmos editá-lo pelo Build Online, não vamos ter sucesso, já que ele pedirá 14$/ano.
Mesmo assim, faça isso.
Com o menu pronto, acesse a guia HTML:
Copie todo o código HTML.
Guarde este código por enquanto.Na página de apresentação do menu, agora, selecione
Assim, você baixará um arquivo source.zip com os arquivos necessários do menu.
Agora, basta substituir a <div id="cssmenu"> até </div> na index.html pelo código que você copiou.
Não deixe faltar essas marcações. O CSS está condicionado a elas.
Método 2 (Direto)
Comece por selecionar source.zip
Depois, edite diretamente o HTML para obter o que precisa.
Para editar, fica assim:
<div id="cssmenu">
<ul>
<li> <a href="LinkPrimeiroNivel.html"><span>Item 1</span></a> </li><li> <a href="LinkPrimeiroNivel2.html"><span>Item 2</span></a>
<ul>
<li><a href="linkSegundoNivel.html"> Item 2.1 </a> </li>
<li><a href="linkSegundoNivel2.html"> Item 2.2 </a> <!-- Item 2.2 não acabou -->
<ul>
<li><a href="linkTerceiroNivel.html"> Item 2.2.1 </a></li> <!-- Acaba 2.2.1 -->
</ul><!-- Acaba 2.2.x -->
</li><!-- Acaba o item 2.2 -->
</ul><!-- Acaba o 2.x -->
</li> <!-- Acaba o Item 2 -->
</ul><!-- Acaba o x -->
</div> <!-- aqui acaba a <div id="cssmenu"> -->
Dica: Observe a hierarquia, pelo canto esquerdo.
Atenção: É necessário saber quantos submenus o menu escolhido possui. Havendo 1, ele aceita até x.x (ex. 2.2) Havendo 2, ele aceita até x.x.x (ex. 2.2.1). Não Havendo, não aceita submenus.
Em vermelho, o que você pode editar. Em cinza, comentários que facilitam a compreensão, mas não são necessários. Em preto, o que você provavelmente verá no seu código.
NÃO COPIE ESTE CÓDIGO. FAÇA AS ALTERAÇÕES DE ACORDO COM O HTML BAIXADO DO CSSMENUMAKER.
Copie e cole linhas para adicionar mais submenus.
Inserção Blogger
Agora a parte de inserção.
No painel do Blogger, coluna esquerda, selecione MODELO. Em seguida, clique no botão laranja EDITAR HTML.
Agora, use o recurso search do blogger, clicando na caixa de código HTML e pressionando o atalho Ctrl+F.
Na caixa que é apresentada, digite: </head .
O Blogger deve encontrar a tag </header> . Imediatamente APOS ela, insira seu HTML.
Feito isso, notará uma lista abaixo do cabeçalho de seu blog.
Caso prefira o menu no topo da página, antes do cabeçalho, procure por <head e insira ANTES de <header> .
De volta ao Editar HTML, insira ANTES de <div id="cssmenu"> a seguinte tag:
<style type="text/css">
Uma linha APOS essa tag, cole o código do arquivo styles.css.
Em seguinda, insira a tag:
</style>
Vá até Salvar Modelo. Se nenhum error for apresentado, basta conferir.
Se houver algum erro, comente aqui e, se preferir, contate-me pelo Facebook, enviando uma screenshot do problema:
--
Não deixe de comentar. Críticas construtivas, sugestões educadas e reclamações pacíficas nos comentários.
Nos comentários, só não é permitido o que a lei não permite.
Autor: Héliton Martyns
Fale com o Autor: Facebook, helitonmrf@gmail.com (pelo facebook, o tempo de resposta é menor).
aonde está o source?
ResponderExcluiraonde está o source?
ResponderExcluiro menu funciona bem, só q ele nao fica de jeito nenhum abaixo do cabeçalho... só fica no topo. Oq será q é? :/
ResponderExcluirele precisa do CSS pra ir pra baixo!
ExcluirCara passa seu facebook ??
ResponderExcluirOu me procura por email > giovaneespinosa@gmail.com
Agradeço se ver esse comentario vlw !
https://facebook.com/heliton.martyns.33
Excluir