MASIGNCLEAN101

Como adicionar submenus no gadget "Páginas" do blogger

     Para quem ainda não usurfrui o gadget, basta ir em design > Adicionar Gadget, e adicionar o gadget "PÁGINAS".
Hoje ensinaremos como personalizar esse recurso do própio blogger com um simples código Html.

Segue abaixo o código do widget original e sem modificações:


<div id='paginas'>
<ul>
<li><a href='/' rel='nofollow'>Início</a></li>
<li><a href='/' rel='nofollow'>Portifólio</a></li>
<li><a href='/' rel='nofollow'>Anuncie</a></li>
<li><a href='/'>Contato</a></li>
</ul></div>

Obs:As partes em vermelho no código representam as páginas existentes no blog quando o copiei. A quantidade e o nome pode mudar conforme as páginas adicionadas em cada blog.
Tudo o que voçê irá fazer é adicionar as seguintes linhas no seu código, logo abaixo do original citado acima:

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

<ul class='children'>

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

<ul class='children'>

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

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

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

</ul>

</li>

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

<ul class='children'>

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

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

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

</ul>

</li>


Realize as alterações necessárias e visualize as alterações, e salve. Se não funcionar, limpe as alterações e refaça o processo.
Compartilhe esse artigo!
Unknown
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

Olá Marcus, era exatamente isso que eu estava procurando, porém preciso de um pouquinho mais de ajuda... No meu widget de páginas tenho as seguintes páginas: início, a dona da cozinha, livros, filmes, contato e anuncie aqui. Quero fazer subcategorias para filmes e livros. Por exemplo, dentro de filmes, uma subcategoria para cada filme e da mesma forma com os livros. Será que é possível? O meu blog é: www.comerama.blogspot.com. Obrigada!!

19 de outubro de 2012 21:04
avatar

Sim Mariana. Você pode fazer isso, inserindo o código citado dentro das tags principais.

O código com a tag de classe "Children" é que vai fazer esse papel de fazer com que as categorias abaixo dela se tornem submenus. Obrigado pela visita. ;)

19 de outubro de 2012 21:25
avatar

marcus

Será que dá para explicar melhor
obrigo

18 de dezembro de 2012 19:15
avatar

Como colocaste estes sub-páginas dentro das tuas páginas?
gostei, mas não consigo fazer igual

18 de dezembro de 2012 19:17
avatar

Olá @sempregosende! Obrigado por comentar! É o seguinte, para você adicionar submenuas à seção é necessário adicionar as seções da seguinte maneira, confira o exemplo do nosso menu:



  <li class='top_menu'><a href='#'>Tutoriais</a>

    <ul>

      <li><a href='http://in4mal.blogspot.com.br/search/label/Photoshop'>Photoshop</a> </li>

      <li><a href='http://in4mal.blogspot.com.br/search/label/Corel'>Corel Draw</a> </li>

      <li><a href='http://in4mal.blogspot.com/search/label/Photoscape'>PhotoScape(breve)</a> </li>

    </ul>

  </li>


Esse código corresponde a uma seção, a seção TUTORIAIS, o código restante trata-se dos submenus.

19 de dezembro de 2012 10:42
avatar

E onde adiciono este código?

como faço esse processo?
obrigado

19 de dezembro de 2012 11:42
avatar

@sempregosende
Você pode criar um novo widget html e inserir o codigo:

<div class='span-24'>
<div class='menu-secondary-wrap'>
<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>
<li><a href='#'>Título 1</a>
<ul class='children'>
<li><a href='#'>Sub-título 1</a></li>
<li><a href='#'>Sub-título 2</a></li>
<li><a href='#'>Sub-título 3</a></li>
<li><a href='#'>Sub-título 4</a></li>
</ul>
</li>
<li><a href='#'>Título 1</a>
<ul class='children'>
<li><a href='#'>Sub-título 1</a></li>
<li><a href='#'>Sub-título 2</a></li>
<li><a href='#'>Sub-título 3</a>
<ul class='children'>
<li><a href='#'> Sub-título 3.1</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Título 1</a>
<ul class='children'>
<li><a href='#'>Sub-título 1</a>
<ul class='children'>
<li><a href='#'>Sub-título 1.1</a></li>
<li><a href='#'>Sub-título 1.2</a></li>
<li><a href='#'>Sub-título 1.3</a></li>
</ul>
</li>
<li><a href='#'>Sub-título 2</a></li>
</ul>
</li>
<li><a href='#'>Título 1</a></li>
<li><a href='#'>Título 1</a>
<ul class='children'>
<li><a href='#'>Sub-título 1.1</a></li>
<li><a href='#'>Sub-título 1.2</a></li>
<li><a href='#'>Sub-título 1.3</a></li>
</ul>
</li>
<li><a href='#'>Título 1</a></li>
<li><a href='#'>Título 1</a></li>
<ul class='children'>
<li><a href='#'>Sub-título 1.1</a></li>
<li><a href='#'>Sub-título 1.2</a></li>
<li><a href='#'>Sub-título 1.3</a></li>
</ul>
</li>
<li><a href='#'>Título 1</a></li>
<ul class='children'>
<li><a href='#'>Sub-título 1.1</a></li>
<li><a href='#'>Sub-título 1.2</a></li>
<li><a href='#'>Sub-título 1.3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Após inserir, altere os links conforme sua necessidade.

19 de dezembro de 2012 14:27
Este comentário foi removido pelo autor.
avatar

Não sei onde adicionar este código

Podes ajudar?
Obrigado

5 de janeiro de 2013 11:29
avatar

:(( por favor tem como voce fazer uma video aula para min ensinando como fazer isto ( adcionar sub menus ) por favor me ajude estou precisando muito, me ajude e gostei de todo o conteudo no blog muito bom se puder ajudar envie a resposta no meu email:

EMAIL: danieldeoliveiracristais2011@gmail.com

11 de abril de 2013 19:56
avatar

pois eu tb gostava de conseguir!!!

se der para enviar para mim também!!!
obrigado

20 de abril de 2013 11:23
avatar

cara valeu to aki são 02:15 da madrugada e tinha colocado um menu com submenu, so que não aparecia o submenu quandu colocava o mause sobre o menu.... coloquei o codigo acima e agora tudo esta certo.... valeu...agora posso dormir em paz....

8 de setembro de 2013 02:19
avatar

ei agora me ensina a colocar esse tipo de comentário em que primeiro tem que ser aprovado...e-mail ruankastro@hotmail.com

8 de setembro de 2013 02:20
avatar

Blz,
Como faço para colocar um conteúdo no submenu criado?

Aguardo

Abraços

8 de abril de 2014 12:24
avatar

Que bom que funcionou Ruan! Fique ligado no Mundo Informal!

17 de abril de 2014 08:27
avatar

Olá, o submenu é caracterizado pelos códigos exemplificados como sub, no tutorial.
<li><a href='#'>sub</a></li>

No caso, o conteúdo que poderia ser alterado é o sub que é o texto do link desse submenu e o link que está no exemplo sendo mostrado um #.

17 de abril de 2014 08:32
Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!