Modificando o blog! 1 - menu -

Sim, agora o Superpoint vai fazer uma série de artigos chamada, Modificando o blog! nessa eu estarei colocando tutoriais de como modificar o seu blog ou template para que ele fique a sua cara!
A nossa primeira postagem da série de artigos vamos abordar um tema de bem difícil acesso para blogueiros que não sabem nada de HTML, como modificar o seu MENU! Essa postagem pode ser um pouco cansativa, pois entra html e html é estressaste...

Então tá, vamos colocar a mão na massa e acabar com a conversa?

Materiais:

NotePad++: Tem a mesma função de um bloco de notas simples, mas esse mostra as tags que estão abertars e fechadas, facilitando assim a sua visualização. Se não sabe o que é tag, leia a primeira aula de html do superpoint.

Um template que já tenha um menu instalado: Como construir um menu é assusnto para outros 500, nesse tutorial nós vamos fazer a modificação de um menu que já exsite ou seja, baixe um template do seu gosto, se quiser um menu com desdobramento, ou como muitos conhecem, expansivo, baixe um template que já venha com essas configurações, pois não é nada fácil fazer um menu expansivo de qualidade.

Materiais em mãos? Vamos começar!
Agora vamos partir para o lado obscuro da coisa.

Não se esqueça de baixar seu modelo completo do template antes de qualquer modificação.

Entre no seu blog com o template devidamente instalado, caso não souber como colocar um template aprenda.

Entre em Painel>>Design>>EditarHTML.

No editar HTML, lembre-se que o que você quer fazer nesse tutorial é apenas modificar o menu, então aperte CTRL+F e escreva <div id='navcontainer'>, provavelmente já vai te redirecionar para a área onde se encontra o seu menu. Se não tiver nada assim escreva o que está escrito no seu menu, ou seja, no nosso caso está escrito Business, então aperte CTRL+F e escreva Business, logo você será direcionado para o seu menu.

Achou? Ótimo, pois agora é o momento de modificá-lo então vamos lá:

você vai encontrar algo semelhante a isso:

li class='current-cat'><a expr:href='aqui esta o URL da sua página inicial'>Home</a></li>



<li><a href='#'>Curos</a>
<ul class='children'>
<li><a href='http://superpointlahsat.blogspot.com/search/label/Seu%20blog%20um%20Sucesso'>Seu blog um sucesso!</a></li>
<li><a href='http://superpointlahsat.blogspot.com/search/label/Curso%20de%20HTML'>Curso de HTML</a></li>
<li><a href='http://superpointlahsat.blogspot.com/search/label/SEO'>SEO</a></li>
<li><a href='http://superpointlahsat.blogspot.com/search/label/Ganhar%20dinheiro%20na%20internet'>Ganhe dinheiro na internet</a></li>
</ul>
</li>
...

Agora vem as dicas:

<li> é o começo de uma lista, no nosso caso o menu, então eu vou colocar abaixo o que você deve fazer em todas as linhas de códigos de lista do menu que existirem ai. Então vamos fazer o seguinte:

Quero que esse menu:

Fique assim:

Então vamos fazer ele ficar assim modificando o código que eu mostrei acima, a primeira coisa do menu será a palvra curso, quando eu colocar a seta do mouse em cima da palavra curso eu quero que apareça 3 alternativas de cursos, então vamos lá:

<li><a href='#'>Curso</a>

# = É onde você deverá colocar o URL da página para a qual deseja redirecionar.
Curso = É a palavra da qual eu falei, aqui você pode colocar o que preferir assim como o URL da página.

Logo abaixo de <li><a href='#'>Curso</a> temos o seguinte:

<ul class='children'>

<li><a href='#'>Seu blog um sucesso!</a></li>

<li><a href='#'>Seu blog um sucesso!</a></li>
<li><a href='#'>Seu blog um sucesso!</a></li>

Children = Significa crianças, é como se fossem os filhinhos da palavra curso entendeu?

<li> = Como eu havia dito são as listas, como nós vamos colocar três então repare que existem três <li> e três </li>.

Ótimo, agora eu quero dar nomes aos filhinhos do "curso", para isso é basicamente o mesmo procedimento, veja como ficara com os nomes das crianças, children...

<li><a href='#'>Curso</a> temos o seguinte:

<ul class='children'>

<li><a href='#'>Curso de HTML</a></li>

<li><a href='#'>Seu blog um sucesso</a></li>

<li><a href='#'>Como ganhar dinheiro na internet</a></li>

Então agora temos a mãe chamada Curso, e ela tem 3 filhinhos chamados Seus blog um sucesso, curso de html, Como ganhar dinheiro na internet.

Entendeu como funciona, agora não se esqueça, toda tag que abre fexa, então repare que os filhos estão entre <li> e </li>, muito cuidado nas modificações ok? Para não ter problemas maiores baixe o modelo completo do seu template, assim se alguma coisa errada acontecer você terá o seu antigo em perfeito funcionamento.

Caso esteja com medo e perdido, cole todo o código que vai de <div id='navcontainer'> até </div id='navcontainer'> e cole no notepad++ assim ficara muito mais fácil, porém o trabalho será dobrado, pois você modificara os códigos duas vezes.

Acabou de fazer tudo, clique em "salvar modelo" e logo depois clique em "visualizar blog" e veja como está ficando, não se esqueça de clicar nos links children para ver se estão todos funcionando corretamente.

Só para complementar...

Vamos supor agora que você quisesse fazer os filhos (children) de curso aumentarem:

Você escreveria o código corretamente, colocaria os URLs e aumentaria uma linha de códigos ou seja:

<li><a href='#'>Curso</a> temos o seguinte:

<ul class='children'>

<li><a href='#'>Curso de HTML</a></li>

<li><a href='#'>Seu blog um sucesso</a></li>

<li><a href='#'>Como ganhar dinheiro na internet</a></li>

<li><a href='#'>Escreva o que quiser</a></li>

E se você querer dar "netos" para o curso, ou seja, filhos dos filhos é muito simples.

Vamos dar filhos ao "Escreva o que quiser":

<li><a href='#'>Curso</a> temos o seguinte:

<ul class='children'>

<li><a href='#'>Curso de HTML</a></li>

<li><a href='#'>Seu blog um sucesso</a></li>

<li><a href='#'>Como ganhar dinheiro na internet</a></li>

<li><a href='#'>Escreva o que quiser</a>

<ul class='children'>

<li><a href='#'>Escreva o que quiser 1</a></li>

<li><a href='#'>Escreva o que quiser 2</a></li>
<li><a href='#'>Escreva o que quiser 3</a></li>
</ul>
</li>


Repare que o procedimento é o mesmo, mas eu tirei o </li> de "escreva o que quiser" e coloquei lá em baixo, quando termina a primeira parte do menu, veja bem, vou mostrar com uma ilustração:

Os quadrados vermelhos abrem e fecham, porém só se fecha lá em baixo, os verdes fecham na mesma linha de código e os roxos abre em cima e fecha em baixo, talvez esteja um pouco confuso, caso ainda tenha dúvidas acesse a videoaula.

Modificando o blog! 1 - menu -

Vídeo ainda não disponível...

É isso ai pessoal, por hoje é só, teremos mais dessas e eu vou passar até todos aprenderem a modificar completamente qualquer template baixado da internet. Abraço e até a próxima!

Posted in: Modificando o blog,Seu blog um Sucesso,Tutorial