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:
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.
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>
<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.
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!
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Poxa, parabens pelo tuto!!! Peguei direitinho e deu perfeito aqui. Obrigada mesmo cara.
ResponderExcluirSoh 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
Olá Serginho
ResponderExcluirNã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!
Olá, tutorial muito bom! Só tenho uma dúvida: E se eu quiser colocá-lo na horizontal? Quais alterações devo fazer?
ResponderExcluirOlá Petrus, obrigado pelo comentário!
ResponderExcluirNo 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
muito bom o blog.vou esperar ansiosamente pelo menu drop down na horizontal.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlá!
ResponderExcluirNossa 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.
Olá Layla, tudo bem?
ResponderExcluirÉ 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!
Oi, Marcelo. Fiz isso que você ensinou para a Layla, mas minha postagem não está aparecendo na categoria nomeada no marcador =/
ExcluirOw Marcelo,muito Obrigada mesmo!!
ResponderExcluirEu conseguir agora!
Parabéns pelo Site,sigo com maior prazer.
Abraço.
Oi Layla
ResponderExcluirQue bom que conseguiste. Fico feliz!
Obrigado mais uma vez
Grande abraço e ótima semana
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 ?
ResponderExcluirdê uma olhada ai http://nandokon.blogspot.com/ e me ajude se puder.
desde ja agradeço!
Olá Nando
ResponderExcluirVocê 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
e ae marcelo, blz ?
ResponderExcluiragora eu entendi.
vlw pela dica parceiro.
Olá Marcelo uma dúvida: E se eu quiser criar uma subcategoria dentro de uma subcategoria como ficaria o código? Abraços!!!
ResponderExcluirMORRIS
ResponderExcluirO 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
Verdade Marcelo!! Desculpa não tinha prestado atenção. Obrigado mais uma vez pela sua disposição de ajudar.
ResponderExcluirOla,
ResponderExcluirParabens 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???
Olá Jorge, seja bem-vindo!
ResponderExcluirTalvez 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
Olá muito interessante a dica do menu, consegui usar ele e editar tudo legal
ResponderExcluirMas 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
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.
ResponderExcluirRafael
ResponderExcluirNada 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
Marcelo
ResponderExcluirSe 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 *-*
Rafael
ResponderExcluirNã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
Marcelo
ResponderExcluirNã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.
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:
ResponderExcluirGAMES 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!
Olá Mr. Koringa
ResponderExcluirEntendo 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
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..
ResponderExcluirVlw aee, parabéns pelo seu site!
ABRAÇOS!!!
Cara, não querendo abusar da tua boa vontade, mais se você puder me tirar mais uma dúvida..
ResponderExcluiré 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!
Olá Mr. Koringa
ResponderExcluirQue 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
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?
ResponderExcluirBom trabalho e muito útil parabéns você me ajudou...
ResponderExcluirBoas,
ResponderExcluireu 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
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?
ResponderExcluirAnônimo
ResponderExcluirA 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.
Olá Marcelo,
ResponderExcluirMenu 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
Olá
ExcluirVou 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
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.
ResponderExcluircoloca no centro resolveu todo o problema dele cortar :)
ResponderExcluirO meu MENU está grande,explico:
ResponderExcluireu 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
Olá.
ResponderExcluirDeu 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?
Olá Vicky,
ResponderExcluirPara 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
Amigo,tem como modificar as fontes e tamanho delas tanto em categorias como subcategorias?
ResponderExcluirAbraços
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.
ResponderExcluirTalvez me possas ajudar com uma questão....
ResponderExcluirComo 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
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.
Excluircomo eu coloco a cor por favor me digam
ResponderExcluirMuito 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, !!
ResponderExcluirFalei besteira no último comentário, editar este e o outro do site que passei é o mesmo, igualmente simples
ResponderExcluirOlá 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
ResponderExcluirOlá Marivaldo,
ExcluirEstaremos à disposição!
Abraços e obrigado pela visita e comentário!
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".
ExcluirÉ isso.
Que isso, Marivaldo. É tentando e errando que se aprende!
ExcluirSe precisar, e estiver ao meu alcance, ajudarei tranquilamente.
Abraços
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?
ResponderExcluirA 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.
Olá,
ExcluirQuanto 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
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.
ResponderExcluirMarcelo, eu adorei! Mas e se quiser colocar as categorias lado a lado, assim como o widget páginas? Como poderia fazer? Muito obrigada!!
ResponderExcluirOlá. 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!!!
ResponderExcluirTmabém gostei do meno, mas estou com o mesmo problema do Rich (comentário acima).Tem solução?
ResponderExcluirOlá
ResponderExcluirMeu submenu fica abaixo da sidebar, por favor, poderia dar uma olhada no site http://www.parceirosdecompra.blogspot.com em Encontre sua loja..
Ola Marcelo eu tinha conseguido fazer isso. mas o meu problema é outro como eu adiciono uma postagem na categoria da Subcategorias (submenu)
ResponderExcluirvou deixar meu site de teste: http://blogdetestenaoabra.blogspot.com.br/
me ajude por favor
Olá, Marcelo!
ResponderExcluirTudo 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.
Fico feliz em saber disso, Helena. Realmente, o Blogger deveria fornecer uma ferramenta que facilitasse a criação de subcategorias.
ExcluirEm breve publicarei artigos similares a este, com gadgets mais modernos e bonitos.
Grande abraço e um ótimo 2013!
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
ResponderExcluirolá boa noite, depois de pronta a subcategoria como faço para postar diretamente nela
ResponderExcluiratt,
alessandro fernandes
Oi Alessandro,
ExcluirPerdão, mas não entendi sua dúvida!
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!
ExcluirMuito obrigado Marcelo.
ResponderExcluirFunciono bem demais em meu blogue. O mais legal é que o menu é bem customizavel hehe.
T+
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!
ResponderExcluirJá apaguei e fiz tudo de novo 4 vezes. Você sabe o que pode estar acontecendo?
Obrigada.
www.inglestraduzido.com
Olá,
ExcluirO 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
Marcelo,
ExcluirQual seria a largura minima para o para funcionar?
Abs,
Marcelo, boa tarde!!!
ExcluirTem como eu colocar o menu com sub-menu, e quando o sub-menu abrir passar por cima da postagem?
Abs,
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.
ExcluirAbraços
vlw marcelo
ResponderExcluirfunfo perfeito aqui
obrigadão
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??
ResponderExcluir1°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
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:
ResponderExcluira 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!
Olá,
ExcluirEu 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
Ajudou muito sim, Marcelo. Valeu. Você explica com muita clareza. Muito obrigada :D
ExcluirQue bom que lhe ajudou.
ExcluirQualquer outra dúvida é só dizer, ok?
Abraços
OLÁ AMIGO, BOA SORTE PRA VC NESSA CARREIRA E PARABÉNS PELA DEDICAÇÃO E INTELIGENCIA.
ResponderExcluirQUE DEUS CONTINUE ABENÇOANDO SUA VIDA
Boa noite amigo,primeiro que tudo parabéns pelo tutorial e muita felicidade pra vc nessa carreira.
ResponderExcluirminha dúvida é: Como mudar a cor dos sub-menus que abrem quando passa o mouse no menu?
Olá, Marcelo. Tudo bem?
ResponderExcluirCá 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
Olá, Helena!
ExcluirBem, 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
Olá, Marcelo
ExcluirOps, 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
Oi, Helena!
ExcluirVocê 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
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
ResponderExcluirFaby,
ExcluirPeç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
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
ResponderExcluirFaby
Oi Faby,
ExcluirPoxa, 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!
nota mil pra vc resolveu meu problema obrigado!!!
ResponderExcluirOlá, 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/
ResponderExcluirOla Marcelo, antes demais obrigado pelo seus posts sempre bem uteis. Preciso de uma ajudinha.
ResponderExcluirCriei 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
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
ResponderExcluirsegue link do blog:http://www.equipeninjagt.com.br/
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.
ResponderExcluirEu 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.
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 :
ResponderExcluirquero colocar este link aberto que criei no instapage,...
http://queima48horas.myinstapage.com/
tem como me ajudar.Muito grato.
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.
ResponderExcluirOla, 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 ?
ResponderExcluirYoo,
ResponderExcluirMarcelo,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!
Segura meu like! pesquisei muito sobre isso, você foi o que explicou melhor!
ResponderExcluirAntes 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...
ResponderExcluirhttps://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!
olá marcelo
ResponderExcluirfiz 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?
Olá Lizandra,
ExcluirAcho 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
muito bom, pena que nao aparece os submenus no meu, somente as categorias.
ResponderExcluirTenho um submenu que tem 20 itens e eles não aparecem quando termina a tela... o que fazer?
ResponderExcluirMarcelo, esse código vale para menu personalizado?
ResponderExcluironde eu encontro o link do meu marcador?
ResponderExcluirOlá Marcelo! O amigo ainda está na ativa???
ResponderExcluirColoquei 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
Marcelo bom dia! Eu coloquei este MENU no meu blog (www.kalopsitamansafotos.blogspot.com) é um blog de teste. Ele tornou o meu blog como "NÃO SEGURO", quando eu tiro o menu ele volta a ficar NORMAL. Você pode me ajudar? Desde já agradeço.
ResponderExcluir