16 de mar de 2011

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 essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

17 comentários

  1. 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!!

    ResponderExcluir
    Respostas
    1. 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. ;)

      Excluir
  2. marcus

    Será que dá para explicar melhor
    obrigo

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
    2. E onde adiciono este código?

      como faço esse processo?
      obrigado

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

    ResponderExcluir
    Respostas
    1. @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.

      Excluir
    2. Não sei onde adicionar este código

      Podes ajudar?
      Obrigado

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. :(( 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

    ResponderExcluir
  6. pois eu tb gostava de conseguir!!!

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

    ResponderExcluir
  7. 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....

    ResponderExcluir
    Respostas
    1. Que bom que funcionou Ruan! Fique ligado no Mundo Informal!

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

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

    Aguardo

    Abraços

    ResponderExcluir
    Respostas
    1. 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 #.

      Excluir

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!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo