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.
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:
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:
<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...
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='#'>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 -
É 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!


Unknown




Posted in: 





















