Dicas, truques, tutoriais, reviews, promoções e informação

quarta-feira, 16 de fevereiro de 2011

Subcategorias no Blogger com menu Drop Down (menu vertical)

Meses atrás postamos aqui no site um tutorial de como criar subcategorias simples na plataforma Blogger. Porém, depois de muitos pedidos e explicações sobre como personalizar mais este hack de subcategorias, decidimos fazer este tutorial.

Neste post você verá como criar um menu com submenus (subcategorias) mas dando um efeito conhecido como Drop Down. Para quem não sabe, este efeito faz com que ao colocar o mouse sobre uma determinada categoria, um submenu seja aberto ao lado da categoria principal.

Exemplo:

criar subcategorias menu expansivel blogger 2013


Menu Vertical com Efeito Drop Down

1. Faça login no Blogger e vá em Layout. Clique em Adicionar um Gadget na sidebar e selecione o item HTML/JavaScript.

2. Agora copie todo este código dentro da caixa abaixo e cole no campo em branco da janela HTML/JavaScript.

<style>
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 250px;
 /* Largura menu principal */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
    position: relative;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 5px;
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active 
{
    color: white;
    background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;
    background:#2E8B57;     /* Cor menu principal*/
}

.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    background:#2E8B57;       /* Altere a cor*/
}

.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    background:#6495ED;       /* Cor do hover*/
}
    /*Largura submenu */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}

* html .ddsmoothmenu-v ul li a {
    height: 1%;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/seututorial/seututorial/smoothmenu.js"></script>
<script type="text/javascript">
    })
</script>
<script type="text/javascript">
    ddsmoothmenu.init({

        mainmenuid: "smoothmenu2",
        //Menu DIV id
        orientation: 'v',
        //Horizontal ou vertical menu: "h" ou "v"
        classname: 'ddsmoothmenu-v',
        //class added to menu's outer DIV

        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
     <ul>
        <li>
            <a href="link-marcador">Categoria 0</a>
        </li>
        <li>
            <a href="link-marcador">Categoria 1</a>
            <ul>
                <li>
                    <a href="link-marcador">Subcategoria 1.1</a>
                </li>
                <li>
                    <a href="link-marcador">Subcategoria 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="link-marcador">Categoria 2</a>
            <ul>
                <li>
                    <a href="link-marcador">Subcategoria 2.1</a>
                </li>
                <li>
                    <a href="link-marcador">Subcategoria 2.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="link-marcador">Categoria 3</a>
        </li>
        <li>
            <a href="link-marcador">Categoria 4</a>
            <ul>
                <li>
                    <a href="link-marcador">Subcategoria 4.1</a>
                </li>
            </ul>
        </li>
        <li>
                   </li>
    </ul>
    <br style="clear: left" />
</div>

See the Pen nFmsc by Seu Tutorial (@marcelost) on CodePen



Explicando o código (1ª parte)

Os códigos que foram destacados de cinza das linhas 005, 048, 058, 067 e 072 devem ser alterados com sua preferência. Você deve editar a largura do menu principal (linha 005) e a dos submenus (linha 072).

width: 250px; (largura do menu principal)
width: 170px; (largura do submenu)

Altere também a cor do menu (linhas 048 e 058) e a cor do hover (linha 067), ou seja, quando o mouse for colocado sobre o respectivo item.

background:#2E8B57; (cor do menu principal)
background:#6495ED; (cor do hover)

Confira neste site a tabela com todos os códigos HTML das cores.

Explicando o código (2ª parte)

Observe que no final do código, eu coloquei a descrição "Link-marcador". No lugar disto você deverá inserir o URL do marcador (categoria) desejada.

Onde está escrito Categoria e Subcategoria coloque o nome de cada marcador.

Explicando o código (3ª parte)

Você pode criar quantas categorias e subcategorias quiser. Mas deverá acrescentar mais linhas no final do código. Por exemplo:

<li><a href="Link-marcador">Categoria</a></li>

Com este código acima, a categoria não terá um submenu.

<li><a href="Link-marcador">Categoria 5</a>
<ul>
<li><a href="Link-marcador">Subcategoria 5.1</a></li>
<li><a href="Link-marcador">Subcategoria 5.2</a></li>
</ul>
</li>

Com o código acima, você terá submenus para a categoria. Ou seja, ao passar o mouse sobre a Categoria 5, os submenus 5.1 e 5.2 serão abertos ao lado.

Enfim, a tag que possui a função de fazer o submenu ser aberto é a tag <ul>.

Para criar mais subcategorias, basta duplicar, triplicar este código...

Explicando o código (4ª parte)

Se quiser, você pode fazer com que os submenus abram horizontalmente, isto é, para baixo.

Para isso, observe que na linha 100 do código há o trecho "orientation: 'v'". O "v' quer dizer vertical, então o submenu abrirá lateralmente.

Coloque h no lugar do v para que o submenu abra na horizontal.

categorias com submenu no blogger 2013

Explicando o código (5ª parte)

Se você já possui a biblioteca jQuery em seu template, remova a linha 090 do código pois poderá gerar incompatibilidade.


Dúvidas ou problemas?
É só comentar!

107 comentários:

  1. Poxa, parabens pelo tuto!!! Peguei direitinho e deu perfeito aqui. Obrigada mesmo cara.

    Soh uma duvida............

    depois que eu altero a cor e a largura dos menus como vc disse eu preciso manter aquelas palavras /* Largura do menu */ e /* Coloque a cor desejada */ ??????

    Obrigada mais uma vez cara.....foi de grandissima ajuda

    ResponderExcluir
  2. Olá Serginho

    Não, não precisa manter estas descrições mencionadas no código. Apenas coloquei para esclarecer melhor o código e suas funções.

    No entanto, manter ou não manter essas descrições não faz diferença. Com elas ou sem elas o script funciona perfeitamente.

    Grande abraço e muito obrigado pelo seu comentário!

    ResponderExcluir
  3. Olá, tutorial muito bom! Só tenho uma dúvida: E se eu quiser colocá-lo na horizontal? Quais alterações devo fazer?

    ResponderExcluir
  4. Olá Petrus, obrigado pelo comentário!

    No caso, para criar um menu drop down na horizontal é outro tipo de código. Este código do tutorial não vale para menu horizontal, pois neste caso, devemos mexer diretamente no código HTML do template.

    Mas infelizmente ainda não postamos um tutorial sobre como criar um na horizontal. Em breve faremos um artigo sobre tal procedimento.

    Abraços

    ResponderExcluir
  5. muito bom o blog.vou esperar ansiosamente pelo menu drop down na horizontal.

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. Olá!
    Nossa PARABÉNS pelo BLog,genial!

    Tenho uma pergunta:

    1. Conseguir fazer o MENU (ok)
    2. A minha dúvida,por Exemplo:
    - No seu MENU tem REDES SOCIAIS >FACEBOOK
    3. E quando CLICO em >FACEBOOK ,aparece TODAS as postagens relacionadas.

    Como consigo fazer isso no meu?
    Porque eu gostaria que os posts ficassem separados.Tem COMO? (blogspot.com)

    Aguardo,Obrigada.

    ResponderExcluir
  8. Olá Layla, tudo bem?

    É o seguinte...

    Você deve colocar as postagens relacionadas com o marcador relacionado.

    Por exemplo: No meu Redes Sociais > Facebook realmente aparecem os posts relacionados ao Facebook. Para isso, eu coloquei nestes posts o marcador Facebook.

    O que você deve fazer:

    Clique em Nova Postagem e no final do seu post, há um recurso chamado "Marcadores". Veja a imagem do link abaixo (cole em sua barra de endereços e dê Enter):

    http://i52.tinypic.com/2ekni3c.png

    Você deve escrever o nome do marcador (subcategoria separada) que deseja para aquele artigo. Por exemplo: se o artigo que você está escrevendo está relacionado a Blog, apenas escreva Blog no espaço em branco do Marcador.

    Caso não tenha entendido é só perguntar, Layla!

    Abraços e obrigado por seguir meu site!

    ResponderExcluir
    Respostas
    1. Oi, Marcelo. Fiz isso que você ensinou para a Layla, mas minha postagem não está aparecendo na categoria nomeada no marcador =/

      Excluir
  9. Ow Marcelo,muito Obrigada mesmo!!
    Eu conseguir agora!

    Parabéns pelo Site,sigo com maior prazer.
    Abraço.

    ResponderExcluir
  10. Oi Layla

    Que bom que conseguiste. Fico feliz!

    Obrigado mais uma vez

    Grande abraço e ótima semana

    ResponderExcluir
  11. no meu blog ja tinha os marcadores soh ki sem subcategorias , eu fiz o q vc explicou no tutorial e deu td certo , mas agora eu toh com dois marcadores no blog . eu devo excluir o antigo ?
    dê uma olhada ai http://nandokon.blogspot.com/ e me ajude se puder.
    desde ja agradeço!

    ResponderExcluir
  12. Olá Nando

    Você pode colocar os marcadores antigos nos novos sem problemas. Basta pegar a URL dos marcadores antigos, e inserir no marcador novo.

    Está explicado no tutorial na parte "Explicando o código (3ª parte)".

    Depois de passar os marcadores antigos para os novos, você pode excluir o widget MARCADORES na sidebar do seu blog.

    Caso não tenha entendido, poste novamente!

    Abraços

    ResponderExcluir
  13. e ae marcelo, blz ?
    agora eu entendi.
    vlw pela dica parceiro.

    ResponderExcluir
  14. Olá Marcelo uma dúvida: E se eu quiser criar uma subcategoria dentro de uma subcategoria como ficaria o código? Abraços!!!

    ResponderExcluir
  15. MORRIS
    O método para criar uma subcategoria dentro de uma outra subcategoria está no próprio código que passei no tutorial.
    Copie o código em HTML/JavaScript e observe que na "Categoria 5" dois submenus são abertos.

    Abraços amigo

    ResponderExcluir
  16. Verdade Marcelo!! Desculpa não tinha prestado atenção. Obrigado mais uma vez pela sua disposição de ajudar.

    ResponderExcluir
  17. Ola,

    Parabens pelo post!! Estou com uma duvida, coloquei o codigo la e qd testo fica blz, mas quando começo a colocar os links nele o efeito para de funcionar, sera q ta faltando algum comando no HTML do Blog (eu uso o Blogger)???
    Fiz exatamente oq vc explicou para criar outras subcategorias mas ele deixa essas categorias embaixo da categoria principal e o efeito não funciona.
    Outra coisa, se eu quiser mudar o layout do menu colocando um background eu consigo??? Como fazer???

    ResponderExcluir
  18. Olá Jorge, seja bem-vindo!
    Talvez na hora de adicionar os links o código pode estar sendo alterado sem você perceber.
    Peço que, por gentileza, copie e cole no Bloco de Notas o código que você está configurando, incluindo os links das categorias. Depois hospede o arquivo e me passe o link de download pra que eu possa dar uma analisada.

    Abraços

    ResponderExcluir
  19. Olá muito interessante a dica do menu, consegui usar ele e editar tudo legal

    Mas queria saber se é possível mudar a cor da fonte pq está preta e quando uso o menu preto fica tudo preto e não da pra ver o texto

    Brigada

    ResponderExcluir
  20. Ele funciona mais eu não gostei por que ele precisa esta na metade do tamanho da coluna para que ele não corte os submenus, e sempre no ultimo submenu ele corta a ultima parte quando tem mais de um.

    ResponderExcluir
  21. Rafael
    Nada lhe impede de editar o código e deixá-lo de um jeito satisfatório a você.
    O código que eu postei no artigo é o padrão. Porém, vai da criatividade de cada um alterá-lo.

    Há como fazer os submenus abrirem na esquerda, no centro ou na direta. Há como "esticar" o tamanho do menu para deixá-lo proporcional ao template. Enfim, use a criatividade apenas! ;)

    Abraços

    ResponderExcluir
  22. Marcelo

    Se possível teria como deixar os submenus visível quando abri-los, tipo quando o visitante colocar a seta do mouse em cima ele aparecer na frente seja o lugar que ele esteja.
    Isso resolveria o problema *-*

    ResponderExcluir
  23. Rafael
    Não sei se eu entendi bem, mas vamos lá. O que você quer é que os submenus sejam abertos na frente dos menus (no centro)? É isso? Se for isso é extremamente simples. Efetue a seguinte alteração.

    Vá até a terceira linha do código do tutorial, esta abaixo.

    /*Sub menu items */
    .suckerdiv ul li ul{
    position: absolute;
    width: 170px; /* Largura do submenu */
    top: 0;
    visibility: hidden;

    Onde está escrito "position: absolute", você deve trocar o absolute por center. Depois salve.

    Veja se é isso que você deseja.

    Abraços

    ResponderExcluir
  24. Marcelo
    Não foi isso que eu quiz dizer, porém da certo também.

    Mas o que eu quero mesmo e que acredito que deixaria este código muito mais eficiente é a seguinte maneira:

    Quando colocamos o mouse em cima de um menu, abre o submenu. Certo.

    Porém quando abre o submenu, se a coluna não tiver o espaço, seja ele qual for (direta, esquerda), vai bloquear o submenu e então vai "cortar" ele. Se a coluna em que o esta submenu não tiver mais espaço para a direita por exemplo e apenas tiver espaço para o menu, quando abrir o submenu ele não vai aparecer.

    Eu queria que o submenu, mesmo não tendo espaço para aparecer na coluna, que ele "salte" para fora da coluna mostrando então o submenu.

    ResponderExcluir
  25. Ola, eu to com uma dúvida aqui, tipo no meu blog eu tenho vários marcadores(categorias), so que eu preciso saber como eu posso fazer para que como em 2 categorias, eu uso subcategorias com mesmo nome,por exemplo, o blog é sobre jogos, so que separado por plataforma e generos:
    GAMES PC (categoria 1)
    AÇÃO (subcategoria)
    FPS (subcategoria)
    GAMES XBOX 360 (categoria 2)
    AÇÃO (subcategoria)
    FPS (subcategoria)

    Espero que tenha entendido qual o meu problema, e como posso resolve - lo. Desde já Agradeço!

    ResponderExcluir
  26. Olá Mr. Koringa
    Entendo perfeitamente o seu problema. Na verdade, também passei por isso aqui.
    Infelizmente o Blogger não reconhece a diferença entre marcadores iguais e impede este desenvolvimento. No entanto, o único jeito de driblar este problema é diferenciando detalhes minuciosos. Por exemplo:

    Coloque Ação em um, e Açao (sem o acento tio) no outro. Entendeu? Mude apenas os detalhes das palavras nas subcategorias. Ou outro exemplo, deixe Ação em um, e Acao (sem cedilha) no outro.

    Eu sei que é um pouco chato fazer com que um marcador perca um detalhe. Mas é o único jeito de driblar esta restrição do Blogger.

    Aqui mesmo, no Seu Tutorial, usamos Vídeos para uma subcategoria, e Vídeo (sem o "s") para outra. É um inconveniente que temos de sustentar tendo o Blogger como plataforma!

    Abraços

    ResponderExcluir
  27. Ok, obrigado pelo esclarecimentoo, me serviu de grande ajudo vo fazer isso, so ao contrário de colocar sem um acento, eu coloco um "-" na frente de uma das subcategorias..
    Vlw aee, parabéns pelo seu site!

    ABRAÇOS!!!

    ResponderExcluir
  28. Cara, não querendo abusar da tua boa vontade, mais se você puder me tirar mais uma dúvida..
    é o seguinte, após colocar esse menu dropdown com as categorias como eu faço para OCULTAR e não excluir os marcadores?
    No aguardo da tua resposta, OBG!

    ResponderExcluir
  29. Olá Mr. Koringa
    Que bom que conseguiu resolver.
    Desculpe pelo seu último comentário ter sido deletado. Mas ele foi acusado como spam e automaticamente removido pelo Blogger, sem qualquer intervenção de nossa parte...

    Enfim, coisas do Blogger!

    Abraços

    ResponderExcluir
  30. Amigão, um ótimo tutorial, apenas estou com um grande problema, Editei tudo legal. O único problema é que quando passo o mouse por cima do menu, as sub categorias ficam por baixo dos outros gadgets. Como resolvo isso?

    ResponderExcluir
  31. Bom trabalho e muito útil parabéns você me ajudou...

    ResponderExcluir
  32. Boas,
    eu tenho um blog no blogger, e queria colocar vários post no mesmo marcador e não consigo.

    tenho um marcador que quero colocar vários post, mas não estou conseguindo, só funciona se colocar um só post.

    Como posso resolver este meu problema?
    Obrigado

    ResponderExcluir
  33. Ficou tudo perfeito! uma maravilha! mas eu gostaria de saber como tiro a parte branca que ficou atrás, como se tivesse marcado.Ah e tambem não tá na cor que eu queria.Pode me ajudar?

    ResponderExcluir
  34. Anônimo
    A parte branca que você diz é o que especificamente? O background do gadget? Se puder postar o link do seu blog aqui (caso já tenha inserido o menu), eu poderia dar uma olhada e entender melhor a sua dúvida.

    ResponderExcluir
  35. Olá Marcelo,
    Menu simples e funcional, que é o mais importante - a perfumaria a gente "ajeita" a gosto depois.
    Pergunta: desejo posicionar na coluna da direita da pagina o menu. Qual é o atributo "position" para que as "janelas" das subcat e submenu abram a esquerda? tentei dar uns chutes mas sem sucesso.
    Grato por ter publicado o menu - de grande ajuda prática e didática.
    Abraco

    ResponderExcluir
    Respostas
    1. Olá
      Vou dar uma verificada aqui no código e ver qual tag deve ser inserida para que as subcat abram à esquerda da tela. Mais tarde, se tiver sucesso, posto aqui para você e também no tutorial, ok?
      Muito obrigado pela visita e comentário. Fico feliz que tenha aprovado o menu.
      Grande abraço

      Excluir
  36. Tem como personalizar o menu original do blogger, mudar a cor, o tamanho da fonte, etc? Estou precisando reduzir um pouquinho o tamanho da fonte do meu.

    ResponderExcluir
  37. coloca no centro resolveu todo o problema dele cortar :)

    ResponderExcluir
  38. O meu MENU está grande,explico:
    eu gostaria de colocar-por exemplo-algumas das postagens sobre Assédio Moral;juntas em sub menu,colocaria o MENU ASSÉDIO MORAL E POSTAGENS RELACIONADAS EM SUB MENU,DEU PARA ENTENDER?
    por favor me ajude,
    obrigada

    nota: o meu email é lailacristinamady@gmail.com

    ResponderExcluir
  39. Olá.
    Deu super certo!! Amei o tutorial!
    Mas há uma pergunta ali em cima que não foi respondida e também é minha dúvida. Como faz para mudar a cor do texto das categorias? Que já vem preta?

    ResponderExcluir
  40. Olá Vicky,
    Para alterar a cor dos textos basta ir até a parte "/* Sub level menu links style */" e modificar a seguinte linha:

    color: black;

    Onde está "black" altere pelo nome (em inglês) da cor desejada. Exemplo:

    color: green;

    O texto ficará verde.

    Abraços

    ResponderExcluir
  41. Amigo,tem como modificar as fontes e tamanho delas tanto em categorias como subcategorias?

    Abraços

    ResponderExcluir
  42. Muito bom, parabéns. Mas queria isso nas abas horizontais, como as desse blog. Tipo, uso várias abas no meu blog, mas não consigo subdividí-las.

    ResponderExcluir
  43. Talvez me possas ajudar com uma questão....

    Como eu faço para direccionar os links para paginas fora do "blog raiz" ou seja:

    Ex.

    Menu 1 - direccionar para www.sapo.pt
    Menu 2 - direccionar para www.iol.pt
    Sub menu 1 - direccionar para www.facebook.com
    Sub menu 2 - direccionar para www.google.pt

    nesse menu quando tu colocar o link por ex. www.sapo.pt ele colocará no menu o link "http://"blog raiz".blogspot.com/www.sapo.pt"

    Obrigado

    P.S. Podes dar uma olhada no meu blog... www.balsanova.pt

    ResponderExcluir
    Respostas
    1. Olá Claudio, boa noite. Vi seu Blog e pelo que vi você está tendo as mesmas dificuladades que eu.Exemplo: nas EMENTAS (Cantinas) ao cliclar em Cantinas deveria abrir a pagina ou postagem correspondente ao assunto e não está acontecendo isso, né? Se você conseguir avançar nesse problema me informa pra me ajudar pois eu tb já fiz várias tentativas e até o presente momento não obtive sucesso. Vou continuar tentando e caso consiga, podes crer, retorno pra ajudar.

      Excluir
  44. Muito bom e muito simples, o meycssmenu (http://www.mycssmenu.com), também tem umas opções legais más dá muito trabalho editar , toda vez que tiver um novo link, esse é mais direto, !!

    ResponderExcluir
  45. Falei besteira no último comentário, editar este e o outro do site que passei é o mesmo, igualmente simples

    ResponderExcluir
  46. Olá a todos e boa noite. Ainda estou lendo, estudando, testando e cada vez mais me enchendo de duvidas acerca do dropdown. Vou preparar um rosário de perguntas pra depois ir fazendo aos poucos e tirando as muitas duvidas. Sou um principiante cheio de vontade de aprender. Prazer estar aqui com vocês.Marivaldo

    ResponderExcluir
    Respostas
    1. Olá Marivaldo,
      Estaremos à disposição!

      Abraços e obrigado pela visita e comentário!

      Excluir
    2. Olá boa noite. Obrigado tutor Marcelo. Vou avisando que as minhas duvidas serão muitas e que conto com a paciencia e boa vontade, não só sua mas de todos do fórum. Faço parte de uma gande maioria de pessoas que não entendem nada de "computez".
      É isso.

      Excluir
    3. Que isso, Marivaldo. É tentando e errando que se aprende!
      Se precisar, e estiver ao meu alcance, ajudarei tranquilamente.

      Abraços

      Excluir
  47. Caro tutor Marcelo, boa noite. Fiz as alterações sugeridas no tutorial mas NÃO obtive sucesso. O máximo que consegui foi colocar as seis categorias. No item 1 do seu tutorial (Faça login no Blogger e vá em Design ► Elementos de página. Clique em Adicionar um Gadget e selecione o item HTML/JavaScript.), observei que no blogger há cinco "gadget". Qual o correto que devo alterar?
    A alteração que eu fiz, e não tive sucesso, foi no gadget que fica imediatamente abaixo do nome do meu blog (Autarquia Municipal de Meio Ambiente - AMMA).
    Outra: o Elementos da Página que se refere no tutorial é a mesma coisa do Layout?
    Como pode ver, sou um iniciante com um monte de duvidas, ou seja, um belo desafio-rsrs.
    Fique a vontade para dizer NÃO POSSO AJUDAR, tenha certeza que vou entender, afinal de contas deve ter muitas atividades além desta.
    Abraço e sorte.

    ResponderExcluir
    Respostas
    1. Olá,

      Quanto a sua primeira dúvida, você deve clicar no "Adicionar um gadget" que está na lateral do painel (sidebar). Onde ficam os Seguidores e etc.

      Não é no gadget que fica abaixo do nome do Blogger, pois esse é o do cabeçalho. Você deve escolher o gadget da lateral, direita ou esquerda (pois não pude ter acesso ao seu blog).

      Abraços

      Excluir
  48. Caro Tutor Marcelo, boa tarde. Em primeiro lugar, muito grato pela disposição em ajudar. Vou testar as duas possibilidades e com certeza entrarei novamente em contato com as minhas duvidas. No mais, parabéns por um gesto de altivez tão carente nos dias de hoje. Conhecimento é pra ser feito exatamente assim, compartilhado e multiplicado, senão, de nada vale. Abraço.

    ResponderExcluir
  49. Marcelo, eu adorei! Mas e se quiser colocar as categorias lado a lado, assim como o widget páginas? Como poderia fazer? Muito obrigada!!

    ResponderExcluir
  50. Olá. Deu tudo certo aqui, mas quando coloco o mouse em cima dos menus, aí aparecem os submenus, porém, quando vou escorregar o mouse para os sub-menus, eles desaparecem.... como concertar isso? Só dá certo quando eu arrasto o mouse numa velocidade muito muito rápida.... os visitantes não terão paciencia.... ajuda aê.... ahhh. e obrigado pelo tutorial!!!

    ResponderExcluir
  51. Tmabém gostei do meno, mas estou com o mesmo problema do Rich (comentário acima).Tem solução?

    ResponderExcluir
  52. Olá

    Meu submenu fica abaixo da sidebar, por favor, poderia dar uma olhada no site http://www.parceirosdecompra.blogspot.com em Encontre sua loja..

    ResponderExcluir
  53. Ola Marcelo eu tinha conseguido fazer isso. mas o meu problema é outro como eu adiciono uma postagem na categoria da Subcategorias (submenu)
    vou deixar meu site de teste: http://blogdetestenaoabra.blogspot.com.br/

    me ajude por favor

    ResponderExcluir
  54. Olá, Marcelo!
    Tudo bem?

    Você não tem ideia de quanto esse tutorial me ajudou! Seu blog foi um achado!

    Eu estava há meses buscando informações de como criar categorias e subcategorias. Incrível como o Blogger ainda não disponibiliza essa ferramenta.

    Super obrigada.

    Helena V.

    ResponderExcluir
    Respostas
    1. Fico feliz em saber disso, Helena. Realmente, o Blogger deveria fornecer uma ferramenta que facilitasse a criação de subcategorias.

      Em breve publicarei artigos similares a este, com gadgets mais modernos e bonitos.

      Grande abraço e um ótimo 2013!

      Excluir
  55. OLA GOSTEI MUITO DA POSTAGEM E DO MENU ,ESTÁ TUDO BEM EXPLICADO . JÁ FAZ UM BOM TEMPO QUE EU TAVA PROCURANDO UM MENU PARECIDO COM O QUE EU QUERIA,ESSE SE PARECE MUITO . MAS EU TENHO UMA DUVIDA . COMO EU FAÇO PRA TIRAR AS SETAS QUE DA ACESSO AOS SUB-MENUS . MAS DESDE JÁ OBRIGADO

    ResponderExcluir
  56. olá boa noite, depois de pronta a subcategoria como faço para postar diretamente nela


    att,


    alessandro fernandes

    ResponderExcluir
    Respostas
    1. Oi Alessandro,

      Perdão, mas não entendi sua dúvida!

      Excluir
    2. Olá amigo, mais como faço para deixar o fundo transparente? E não entendi como é para mudar a largura, basta apenas colocar um número lá amigo? Aguardo resposta!

      Excluir
  57. Muito obrigado Marcelo.
    Funciono bem demais em meu blogue. O mais legal é que o menu é bem customizavel hehe.

    T+

    ResponderExcluir
  58. Oi Marcelo. Obrigada pelo turorial, muito bem explicado. Mas estou tendo um problema: as subcategorias não aparecem! Certifiquei de que o tag "ul" está no lugar certinho, enumerei as categorias de acordo com as subcategorias (1, 1.1, 1.2...), mas elas não aparecem!

    Já apaguei e fiz tudo de novo 4 vezes. Você sabe o que pode estar acontecendo?

    Obrigada.
    www.inglestraduzido.com

    ResponderExcluir
    Respostas
    1. Olá,

      O código está funcionando normalmente. No entanto, acredito que possa ser a largura de sua sidebar. Pelo que eu vi em seu site, a largura é inferior a largura necessária para que o submenu seja devidamente aberto. Aliás, tenho quase certeza de que seja isso!

      Mas o problema não é o seu template, é o código do drop down mesmo. Eu estou estudando uma maneira de deixá-lo adaptado para qualquer sidebar, e fazer com que o drop down sobreponha a largura da sidebar, sem desconfigurar a página.

      Todavia, se puder testar esse código em um blog de testes, seria muito importante. Basta criar um outro blog -- se preferir você pode deixá-lo visível somente para você mesma -- e realizar o teste.

      Abraços

      Excluir
    2. Marcelo,

      Qual seria a largura minima para o para funcionar?

      Abs,

      Excluir
    3. Marcelo, boa tarde!!!

      Tem como eu colocar o menu com sub-menu, e quando o sub-menu abrir passar por cima da postagem?

      Abs,

      Excluir
    4. Mauricio, como expliquei no comentário anterior, é exatamente isso que estou tentando fazer no código. Isso geralmente é feito por um "z-index". Mas tenho que ver um jeito de deixá-lo global.

      Abraços

      Excluir
  59. vlw marcelo
    funfo perfeito aqui
    obrigadão

    ResponderExcluir
  60. Marcelo - primeiramente gostaria de agradecer pela postagem, simplesmente sensacional. Há muito tempo procuro por um menu com essas características, finalmente encontrei. Consegui configurar boa parte de minhas necessidades, entretanto faltam duas coisas para ficar perfeito, você pode me ajudar??
    1°Como reduzir o ESPAÇO (LINHA) EM BRANCO entre as Seções?
    2°Como acabar com o ESPAÇO EM BRANCO no canto esquerdo das Seções?

    Para facilitar em meu blog, há no canto esquerdo o item SEÇÕES com as características que eu mencionei corrigidas em outra opção de menu e o item TESTE com o seu MENU, mas faltando acertar as duas características mencionas. Você pode me ajudar. Grato.

    Meu blog é www.direitoseconcursos.blogspot.com

    ResponderExcluir
  61. Marcelo quer te dar os parabens por esse magnifico site. Não encontrei essa informação em mais nenhum lugar. Você é demais. Mas, tenho uma dúvida muito báscica (minha primeira vez mexendo com blogger (vergonha). Eu entendi tudo o que vocês explicou, mas não sei onde vou buscar os links ou urls dos marcadores para colocar no código... Por exemplo:

    a href="onde encontro este link?"> categoria1

    a href="Aqui copio o link da barra de navegador desta página (tá certo?)">subcategoria 1.1>...

    Entendeu minha dúvida? Desculpa não saber explicar melhor :/

    Muito obrigada por sua ajuda. Valeu!

    ResponderExcluir
    Respostas
    1. Olá,

      Eu entendi. Você quer pegar os URLs dos marcadores (que no caso serão categorias e/ou subcategorias).

      Se você me fornecesse o link do seu blog seria mais fácil de explicar. Mas vou explicar baseando em meu blog.

      Ao fazer um post e publicá-lo, caso você tenha inserido marcadores (ou tags) nesse post, cada respectivo marcador terá um URL próprio para que você acesse o conteúdo ligado apenas àquele marcador. Então, por exemplo:

      Aqui no blog eu tenho um marcador chamado "Youtube". O link desse marcador é este abaixo.

      http://www.seututorial.com/search/label/YouTube

      Para você pegar o link do marcador, basta clicar sobre o marcador e copiar o link dele (lá na barra de endereços do navegador).

      Portanto, na prática, o marcador do meu exemplo ficaria assim:

      a href="http://www.seututorial.com/search/label/YouTube">Youtube (aqui é o nome da categoria).

      Espero que tenha entendido.

      Qualquer coisa, é só dizer!

      Abraços

      Excluir
    2. Ajudou muito sim, Marcelo. Valeu. Você explica com muita clareza. Muito obrigada :D

      Excluir
    3. Que bom que lhe ajudou.

      Qualquer outra dúvida é só dizer, ok?

      Abraços

      Excluir
  62. OLÁ AMIGO, BOA SORTE PRA VC NESSA CARREIRA E PARABÉNS PELA DEDICAÇÃO E INTELIGENCIA.
    QUE DEUS CONTINUE ABENÇOANDO SUA VIDA

    ResponderExcluir
  63. Boa noite amigo,primeiro que tudo parabéns pelo tutorial e muita felicidade pra vc nessa carreira.
    minha dúvida é: Como mudar a cor dos sub-menus que abrem quando passa o mouse no menu?

    ResponderExcluir
  64. Olá, Marcelo. Tudo bem?

    Cá estou eu novamente pra agora tirar uma dúvida básica sobre categorias. Tenho certeza que você pode me ajudar mais uma vez... rs

    Bem, vamos lá! Tenho um blog de viagens e categorizei os países que visitei, incluindo as cidades. No entanto, em alguns deles não é possível "linkar" apenas um post, pois eu visitei muitas atrações numa cidade só, e há links para cada uma dessas atrações/bairros.

    Minha pergunta: é possível criar categorias para subcategorias?
    Não sei se ficou confuso, mas poderia ser também a sub da subcategoria... hehehehe!

    Dã uma olhadinha no meu blog, no menu Inglaterra. Lá, em Londres, eu quero relacionar os bairros que visitei. Eu já inclui Covent Garden, mas gostaria de incluir abaixo dele mais categorias.

    É possível?

    Grande abraço,

    Helena

    ResponderExcluir
    Respostas
    1. Olá, Helena!

      Bem, preciso que você me passe o link do seu blog para eu verificar corretamente.

      No entanto, se entendi, você quer algo do tipo:

      Categoria > Subcategoria > Subitem (que é a categoria da subcategoria). Ou seja, quando o usuário clicar na categoria, abrirá a sub, e quando clicar na sub, abrir o subitem dessa subcategoria. É isso ou entendi errado?

      Se for isso, é possível, sim. Porém, o menu ficará demasiadamente largo, dependendo do width do seu blog e da posição em que o menu se encontra nele. Tudo o que você precisa fazer é apenas adicionar mais algumas linhas do código HTML.

      Dê uma olhada nessa imagem abaixo e veja se é isso que você quer.

      http://i.imgur.com/CvI23FC.png

      Abraços

      Excluir
    2. Olá, Marcelo

      Ops, esqueci de colocar link do blog.
      http://experimentosdeviagens.blogspot.com.br/

      É isso mesmo que eu gostaria. O Subitem. Bem, se você conseguir avaliar se vai ficar bom ou não, te agradeço.

      Obrigada mais uma vez. Super abraço da

      Helena

      Excluir
    3. Oi, Helena!

      Você usa o código que eu coloquei nesse post? Pois o seu menu é horizontal.

      De qualquer forma, isso não é importante.

      Porém, preciso que você me passe o código HTML desse menu para eu explicar melhor. Você deve acrescentar outras entradas "li" com os respectivos marcadores.

      Pelos comentários aqui é difícil de mostrar.

      Se achar melhor conversarmos através do fórum do blog ou por e-mail, você é quem sabe. Pois ficaria mais simples de acrescentar as entradas e mostrar para você como é.

      OBS: Caso queira conversar por e-mail, coloque ele em um comentário sozinho que eu não vou publicá-lo.

      Abraços

      Excluir
  65. Oi Marcelo, muito legal esse Menu.. mais assim como a Helena eu quero expandir o Menu para: Categoria, Subcategoria e Sub-item. Nossa me ajudaria bastante. Desde já agradeço à atenção. xeiruuuuuuuuu Faby

    ResponderExcluir
    Respostas
    1. Faby,

      Peço a você o mesmo que pedi a Helena. Se puder me passar seu e-mail (eu não irei publicá-lo aqui) seria mais simples de explicar.

      Abraços

      Excluir
  66. Quero deixar aqui meu agradecimento por voce ter dedicado um tempo à esclarecer as dúvidas que tive. É público e notório que muitas pessoas que tem um site de ajuda tutorial, nos deixam a ver navios quando temos problemas. Obrigado pela ajuda, vc é raro.E continue sendo essa pessoa maravilhosa e atenciosa que és. Abraço
    Faby

    ResponderExcluir
    Respostas
    1. Oi Faby,

      Poxa, obrigada pelas palavras. Fiquei feliz em ler seu comentário.

      Se precisar de mais alguma coisa, por favor, é só dizer.

      Grande abraço e ótimo final de semana!

      Excluir
  67. nota mil pra vc resolveu meu problema obrigado!!!

    ResponderExcluir
  68. Olá, eu gostaria muito da sua ajuda, estou cuidando desse blog de tecidos e preciso personalizar criando categorias para melhorar o visual e também para melhorar as vendas do meu cliente (meu sogro hehe). Então estou quebrando a cabeça para que as subcategorias funcionem, faço tudo certinho mas na hora elas ficam embaixo da categoria ou abre a janelinha do lado da categoria mas o nome/link da subcategoria não aparece, o que posso estar fazendo de errado? Se caso eu conseguisse diminuir o tamanho da área de postagem, pode ser que apareça as categorias e subcategorias? Por favor, se possível me ajude! Aguardo resposta. Obrigada :D Ah o link do blog http://www.hitecidos.com/

    ResponderExcluir
  69. Ola Marcelo, antes demais obrigado pelo seus posts sempre bem uteis. Preciso de uma ajudinha.
    Criei umas pastas no meu blog, no entanto quero que quando alguém clic nelas consiga aceder ao tema da pasta associado.
    Ou seja para poemas por exemplo, aceder a todos os poemas do meu blog. So não sei como inserir o link dos textos ou como ao clicar na pasta aceder aquilo que quero.
    O meu blog é o seguinte: http://eueoplanetaterra.blogspot.pt/
    Assim ira compreender melhor o meu problema
    Desde já muito obrigado

    ResponderExcluir
  70. ola marcelo tudo bem , primeiramente quero lhe agradecer pelo menu vertical que vc posto ele´e´show !, mas tenho uma duvida ,configurei as cores e deu tudo certo, mas o texto do marcador quando selecionado fica apagado , ja tentei mudar de varias formas a cor mas não tem jeito vou deixar em seguida o link do blog se vc puder me ajudar ou tiver algum outrio modelo de marcardor que combine eu agradeço,... abraço
    segue link do blog:http://www.equipeninjagt.com.br/

    ResponderExcluir
  71. Ola tudo bem Sr Marcelo, como esta, eu gostaria de sua ajudar para fazer o menu horizontal com sub-menu e sub-item, estava lendo os seus comentário e vi que o senhor pede e-mail para poder explicar.
    Eu usava o http://java90.webnode.com que nele tem como colocar os sub menu e as sub opções, tentei fazer no blogger mas o máximo que consigo é fazer um sub menu.
    Troquei porque o webnode não tem como ter liberdade, eu queria usar Syntax Highlighter e vi que pelo blogger é possível.
    e-mail: abilioshogun@gmail.com
    Muito Obrigado pela sua atenção.

    ResponderExcluir
  72. Marcelo.Ja Tenho os Sub-menus.Com a Sua Luz agora criei as Sub-categorias.Parabens...Agora eu estou querendo colocar um Link aberto de Vendas para o Auto-responder Na sub-Categoria.Eu estou nao consiguindo.Para voce dev ser facil.Por gentileza mais uma ajuda :
    quero colocar este link aberto que criei no instapage,...

    http://queima48horas.myinstapage.com/
    tem como me ajudar.Muito grato.

    ResponderExcluir
  73. eu consegui criar, só fiquei na dúvida de como adicionar conteúdo em cada subcategoria, ou como salvar um post dentro de uma das subcategorias criadas.

    ResponderExcluir
  74. Ola, achei muito bom esse tutorial, eu fiz e ficou perfeito, mas estou com um problema, depois que passamos uma vez o mouse para ver as subpastas, elas desaparecem como se mostrasse que já foi visto aquela subpasta e não da para ver mais, só se atualizar, gostaria que não tivesse essa opção e abrisse o tempo todo as subpastas, já tentei achar onde tiro essa função mas não consigo, sera que você pode me ajudar Marcelo, por favor ?

    ResponderExcluir
  75. Yoo,

    Marcelo,muito obrigada pelo tutorial! Me ajudou bastante e consegui o resultado que queria. Ah,e mais uma coisa: só para avisar mesmo,mas o link que você pôs parao site com as cores em HTML não está funcionando mais. Eu peguei as cores desse aqui >> http://www.ufpa.br/dicas/htm/htm-cor1.htm <<. Talvez alguém venha lhe pedir um novo link,sei lá... só para avisar mesmo.

    Mais uma vez,obrigada pelo tutorial!

    ResponderExcluir
  76. Segura meu like! pesquisei muito sobre isso, você foi o que explicou melhor!

    ResponderExcluir
  77. Antes de mais nada, gostaria de parabenizá-lo pelo blog e agradecer pela dica extremamente funcional. Deu certo aqui, porém, tem uma coisa que tá incomodando e (ainda) não consegui tirar...

    https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/12316285_941394555946296_1598652164301327297_n.jpg?oh=a8567409154c30ed9285429b4665c30a&oe=56F5FD7D&__gda__=1458999457_fbd4a2c47effb7827c336e52d0087f69

    Eis o link com a img pra ficar mais fácil de compreender. Essa 'sombra' atrás do primeiro item da subcategoria... Tem como remover?

    Abraço!

    ResponderExcluir
  78. olá marcelo


    fiz tudo certo penso eu...mas na hora que vou vizualizar o blog... nao aparecem as categorias e sim seu código html...o que será que não estou fazendo...pra dar certo?

    ResponderExcluir
    Respostas
    1. Olá Lizandra,

      Acho que seu código pode ter sido 'quebrado' na hora da publicação, ou alguma tag fora do lugar. Pode me passar o link do seu blog pra eu dar uma olhada no problema?

      Abraços

      Excluir
  79. muito bom, pena que nao aparece os submenus no meu, somente as categorias.

    ResponderExcluir
  80. Tenho um submenu que tem 20 itens e eles não aparecem quando termina a tela... o que fazer?

    ResponderExcluir
  81. Marcelo, esse código vale para menu personalizado?

    ResponderExcluir
  82. onde eu encontro o link do meu marcador?

    ResponderExcluir
  83. Olá Marcelo! O amigo ainda está na ativa???
    Coloquei o código no meu blog. Fiz as alterações que desejava, e..ficou bonito! problema: Parece que deu uma pane na minha mente,rs, gostaria que o amigo me desse uma dica:Como faço pra que os post editados, já apareçam na categoria??? Obrigado, aguardo,
    Maria

    ResponderExcluir