Criar um menu expansível no blog

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache </head> então coloque isso antes dela:

<script src="https://sites.google.com/site/tutoriaisblogger/menu-expan.js" type="text/javascript"></script>

Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}

Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina designer, adicionar gadget, html/javascript e cole esse código:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
//-->
</script>


Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.

Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:

<div id="CollapsiblePanel1" class="CollapsiblePanel1">

e no final:

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.

Fizemos uma atualização neste tutorial: 24/04/2010

Veja também:
Como colocar menu com sub menu no blog
Barra de rolagem na lista de blogs
Usar palavras chave e descrição no blog para ganhar mais visitas

143 comentários:

  1. Ótima Dica Fabiano, acredito que vou usar esse recurso no meu próximo projeto que iniciarei dia 01/06/2009.

    Abraços!

    ResponderExcluir
  2. Ola Fabiano, vim retribuir a visita, e conhecer teu blog.
    Otimas dicas.

    OBS: Respondi o teu comentario no Pensieri e Parole,

    Meire

    ResponderExcluir
  3. há algum demo para ver o resultado ?

    ResponderExcluir
  4. o que sao estilos css?

    ResponderExcluir
  5. Dav7
    no final da postagem tem nosso link para as duvidas frequentes naquela pagina usamos esse código


    Anônimo
    estilo CSS são código que usamos para formatar o texto, é toda aquela segunda parte do código .CollapsiblePanel {
    padding: 3px;.....

    ResponderExcluir
  6. eu quero saber como mudar o modelo do titulo dos menus, tipo o daki o guia rapido esta dentro de uma bolinha e talz poderia fazer um tutorial de como fazer isso ou se ja tiver me manda o link ?

    ResponderExcluir
  7. o titulo muda no estilo h2 na pagina layout

    vou escrever sobre isso na próxima semana

    ResponderExcluir
  8. http://matecarneiro.blogspot.com31 de maio de 2009 12:28

    Olá Fabiano achei seu blog fantástico porque é muito esclarecedor. Como estou começando agora, ainda estou tateando. Já sou sua seguidora e tiro muitas duvidas aqui. Se vc puder me ajudar gostaria de saber porque quando posto com imagem essa imagem nao aparece para meus seguidores, só aparece o titulo do meu post? É alguma configuraçao que tenho que fazer?Agradeço pela sua resposta e aguardo
    bjs

    ResponderExcluir
  9. não sei se consegui entender bem, mas acredito que está correto só vai aparecer o título mesmo.

    ResponderExcluir
  10. acho estranho...pq em algumas vezes aparece a foto junto com o titulo e as vezes so o titulo do que foi postado...se vc for no meu blog vai ver na parte dos ~blogs que sigo~....
    bjs teresa

    ResponderExcluir
  11. MaTê - Pensamentos em Orientação
    você está falando da lista de blogs?
    lá tem a opção de mostrar ou nao a miniatura de imagens, mas mostrar a imagem vai depender da postagem que cada um faz no seu blog.

    ResponderExcluir
  12. oi Fabiano.Quando vc entra na minha pag do blog , ao lado direito aparecem os blogs que eu sigo certo? Voce pode ver que alguns aparecem só o título mais recente de postagem e em outros aparecem além do título de postagem, uma foto junto(a foto que a pessoa postou junto com o artigo). Gostaria que sempre que eu fosse postar, a foto aparecesse junto. Preciso fazer alguma configuração?
    obrigada e bjs
    Teresa

    ResponderExcluir
  13. acho que não é possivel, você quer que as miniaturas das imagens que você coloca no seu blog apareçam nos blogs das pessoas que colocaram você na lista de blogs?

    se for isso não dá, porque essa configuração é feita no blog de quem coloca a lista, no meu caso mostro só o titulo do blog.

    ResponderExcluir
  14. Ah entendi! Que pena...mas mesmo assim muito obrigada pelas dicas e paciencia....
    bjs Teresa

    ResponderExcluir
  15. Muito util a dica eu estava querendo aprender está função e me ajudou muito vlew!

    Visitem o Mu BLog

    www.slzinfo.blogspot.com

    ResponderExcluir
  16. Meio trabalhoso, mas muito útil pra economizar espaço, além de muito elegante.
    Adorei!

    ResponderExcluir
  17. me responde uma coisa
    esse menu fica igual ao do site?
    (esse site mesmo)
    porque quero testar mais antes me responde isto obrigado

    e se nao for me fala como posso colocar um menu igual ao do site

    ResponderExcluir
  18. fiz uma correção no código, um servidor que hospedava os arquivos saiu do ar, por isso não funcionava.

    ResponderExcluir
  19. Eu nao consegui fazer, deu errado agora além de não funcionar no topo da pagina fica : titulo do menu conteudo oculto e nao acontece nadaa vc podeia me ajudar a tirar isso? obrigado

    ResponderExcluir
  20. já testamos e o menu funciona, mas se ao tentar colocar deu problema em alguma outra parte do blog, provavelmente você apagou ou colocou algo em lugar errado.

    ResponderExcluir
  21. muita boa dica essa!! e eu tbm gostaria de saber se vocês tem algum poste ensinando colocar esse link's abaixo da postagem que vocês mesmo tem, enviar pro twitter, enviar pro linkou, agregar ao google tem algum codigo ou você pode postar?? gostaria de aprender isso.

    ResponderExcluir
  22. Paraibaxd
    aqui tem o código para as redes sociais

    http://www.dicasparablogs.com.br/2009/05/enviar-para-redes-sociais.html

    ResponderExcluir
  23. Fabiano Roberto Muito obrigado pela atenção a mim e a todas as pessoas aqui do blog valeu mesmo cara por dividir a suas ideias com as pessoas!! tava precisando dessse codigo vlw!abraço

    ResponderExcluir
  24. Olá amigo. Você poderia ensinar como adicionar um menu do programa "Flash Menu Labs" no blogspot?

    Desde já agradeço!

    ResponderExcluir
  25. True Iory
    você deve ter um código html, então coloque pela pagina layout, adicionar gadget, html/javascript

    ResponderExcluir
  26. Bom, eu tenho mesmo, mas não funciona! =/

    Não irei colocar o código pois é muito grande... mas se quiser upo e te passo o link .

    Coloquei em um Gadget mas não funfou... nem colocando no CSS direto blog...

    Alguam solução?

    PS: Se quiser uma parceria entre o GHB e seu blog tamo ae cara!

    Ótimo blog!

    ResponderExcluir
  27. VALEU PELAS DICAS ABRAÇOS A TODOS

    ResponderExcluir
  28. eu não achei o tal...CollapsiblePanel {
    padding: 3px;....., não sei onde fica, me ajuda.

    ResponderExcluir
  29. está logo na primeira linha do estilo CSS

    Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

    CollapsiblePanel {
    padding: 3px;..

    ResponderExcluir
  30. é que o meu blog...não tem um template tradicional, eu peguei um diferente, e ai não acho, rsrsrsrs, fora a minha ignorância pra essas coisas, rsrsrsrsrs, vou tentar, mas mesmo assim...obrigada por me ajudar...abraço.

    ResponderExcluir
  31. Onde é esse CSS ???????????
    Explica melhor!

    ResponderExcluir
  32. CSS é toda parte de formatação do blog: body{..... e todos os outros parecidos com isso

    ResponderExcluir
  33. será que da para ter o hotwords e postagem expansivel?

    ResponderExcluir
  34. Michel
    eu uso hotwords e postagem expansivel e por enquanto está funcionando

    ResponderExcluir
  35. Eu não entendi muito bem.
    Minhas Dúvidas:

    Como Coloco as barinhas todas juntas para ser estilo menu?


    Onde coloco o código?

    ResponderExcluir
  36. Fala Fabiano tudo bem?

    Cara muito legal este menu, mas ainda tenho uma dúvida: tem como eu colocar um hiperlink, para assim eu colocar só um resumo da matéria e quando quiserem ler o restante do conteudo clicassem no link e cairia na página que está a matéwria completa?

    Desde já agradeço...

    ResponderExcluir
  37. veja aqui como colocar um resumo da postagem

    http://www.dicasparablogs.com.br/2009/10/mostrar-resumo-da-postagem.html

    ResponderExcluir
  38. só mais uma duvida...

    como faço para colocar mais de uma matéria no menu pois, não sei se entendi direito o post, mas não consgui colocar mais de um só alterando de CollapsiblePanel1 para CollapsiblePanel2...e estou quebrando a cabeça p/ entender isso...

    OBS: adorei seu blog, já utilizei várias dicas dele e perco muitas hosras do dia lendo seus tutorais...

    ResponderExcluir
  39. amigo quando VC quiz dizer->vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho: onde exatamente fica essa parte é desculpa aew a ingnorancia rs aguardo resposta

    ResponderExcluir
  40. na parte junto com os outros estilos CSS, body{...}

    ResponderExcluir
  41. Não consegui fazer, que peninha, não achei css, o q faço? Saiu um monte de escritos acima do blog, então fiz alguma coisa errada e desfiz..pode me orientar, por favor?
    Fernanda

    ResponderExcluir
  42. esse menu é mesmo um pouco complicado de instalar, tente fazer novamente

    ResponderExcluir
  43. Muito bom! só uma dúvida:
    Como faço para ajustar a largura e a altura, tô me matando por aqui XD

    Abraços.

    ResponderExcluir
  44. coloque width: 200px na parte .CollapsiblePanelContent, talvez seja necessário colocar em outras também

    ResponderExcluir
  45. Como coloco imagens?

    ResponderExcluir
  46. que imagens? se for no painel que abre é no local onde está escrito
    Conteúdo Oculto

    se quiser formatar o botão é no estilo CollapsiblePanelTab

    ResponderExcluir
  47. Nossa Fabiano que delicia de ideias aqui postada.
    Eu consegui aprender a fazer um menu com a Elke Barros ,igual a Apple com cores cinzas e tudo mais amigo.
    Mas queria algo assim ou seja a ideia de poder mexer a vontade nos codigos da CSS,ou seja nos estilos coisa que o menu em expansão dos demais blogs...
    Não da muita beira para isso!!!
    Aqui no seu blog aprendi numa boa e vou testa-lo em uns blogs de amigos que estou testando.
    Abraços

    ResponderExcluir
  48. Oiie
    Alguem pode me ajudar ?
    eu Vi Um menu em uns do seus site "Cidade Web" la tem Uma menu azul..
    Poxa você Pode me Mandar o Codigo dele para Eu Coloca em Meu Blog ?
    Vlw & Obrigado !

    ResponderExcluir
  49. Oiie
    Alguem pode me ajudar ?
    eu Vi Um menu em uns do seus site "Cidade Web" la tem Uma menu azul..
    Poxa você Pode me Mandar o Codigo dele para Eu Coloca em Meu Blog ?
    Vlw & Obrigado !

    ResponderExcluir
  50. seria bom se tivesse ver como ia ficar

    ResponderExcluir
  51. MEU AMIGO MUITO UTIL SEU TRABALHO
    MAIS TENHO UM PROBLEMINHA
    CONSEGUI FAZER SOMENTE DOIS MENUS ESPANCIVEL
    DEPOIS DESSES NÃO CONSEGUI FAZER MAIS
    FAÇA CERTINHO MAIS NÃO FICA OCULTO
    PRECISO DE UMA AJUDINHA

    ResponderExcluir
  52. colocou o código completo desde o javascript?

    ResponderExcluir
  53. Quando colocar já vai aparecer o menu.

    ResponderExcluir
  54. assim que colocar o ´codigo completo aparece o menu

    ResponderExcluir
  55. Depois qual tag coloca o primeiro codigo?

    ResponderExcluir
  56. Ola, kra parabens pelo blog.
    Mas queria esclarecer uma coisa...

    Consegui por o menu tudo direitinho mas como adiciono links, postagens?
    E tem como eu deixar expansivel os meus menus ja existentes com as postagens e tudo mais?

    Tenho um blog de downloads, queria adicionar as postagens com o nome de cada artista no menu expansivel assim como fazemos em qualquer outro menu, só não sei se é possivel porque ainda não consegui.

    É possivel?

    Desde ja, obrigado!

    ResponderExcluir
  57. onde está escrito conteudo oculto, você deve colocar o código dos links,imagens e o que mais desejar, o codigo do link de texto é assim:

    <a href='http://www.dicasparablogs.com.br/2009/05/criar-um-menu-expansivel-no-blog.html'>Criar um menu expansível no blog</a>

    ResponderExcluir
  58. E aí cara, seu site tá excelente, vc me indicou este menu e eu estou colocando no meu site, porém apareceu uma dúvida. Eu não consigo colocar mais de um link no conteudo oculto, o primeiro link fica oculto, mas os seguintes ficam visíveis, o que acontece?

    Valeu,

    ResponderExcluir
  59. infelizmente não sei qual o problema, se colocar varios menus era para todos ficarem ocultos até clicar neles. tente novamente e cuidado para não misturar os ´codigos

    ResponderExcluir
  60. mim bateu uma duvida!!!
    onde eu escrevo os Links?
    em que parte do HTML?
    eu já tentei e nada eu num sei como é mim respondam o mais rápido possível!!!

    ResponderExcluir
  61. veja que na parte do código que você deve adicionar no gadget tem escrito Conteúdo Oculto, é neste lugar que deve colocar os links ou qualquer outra coisa.


    a parte de formatação(estilos CSS) pode ser logo depois e body{...}

    ResponderExcluir
  62. vou te mandar o codigo por e-mail pra você dar um aolhada

    ResponderExcluir
  63. Aeee gente eu qria falar uma coisa qeria q explicasse como q bota no nome lá embaixo do "titulo do menu" pq qd eu cliko "titulo do menu"desliza uma coisa pra baixo mas nao ta escrito nada e qria q vcs me ensinasse a como escrever alguma coisa ali

    ResponderExcluir
  64. tem que colocar o titulo no local indicado no código, mas cuidado na hora de fazer alterações pq se apagar ou trocar alguma coisa que não deveria o código não funciona

    ResponderExcluir
  65. tem que colocar o titulo no local indicado no código, mas cuidado na hora de fazer alterações pq se apagar ou trocar alguma coisa que não deveria o código não funciona

    ResponderExcluir
  66. Conteúdo Oculto Quando Clico pra Expandir O Menu,Como Faço Pro Menu Ficar Normalmente Funcionado?

    ResponderExcluir
  67. o menu deste código só aparece quando clica sobre ele, mas pode usar a pesquisa no inicio de nossa pagina para achar outros menus

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

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

    ResponderExcluir
  70. por exemplo depois de body{....} ou #main{...} isso são estilos css

    ResponderExcluir
  71. essa parte do conteudo oculto, você coloca o codigo dos links, imagens(banners) e o que mais quiser, mas é claro precisa saber mexer com html para fazer isso, por exemplo o link de texto é assim:
    <p align="center"><a href="http://www.dicasparablogs.com.br" target="_blank">Dicas para blogs</a></p>

    e com imagens assim:

    <p align="center"><a href="http://www.dicasparablogs.com.br" target="_blank"><img src="http://img35.imageshack.us/img35/4456/dicas2.jpg" border="0" /></a></p>

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

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

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

    ResponderExcluir
  75. o menu daquele site é feito com uma imagem de fundo grande e o código do menu horizontal.

    se nao conseguir fazer escreva para meu email

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

    ResponderExcluir
  77. o menu suspenso é automatico do arquivo do blog, ou então tem que fazer o código manualmente

    Menu jump

    ResponderExcluir
  78. Hey, você tem algum site com exemplo? sabe dizer se alguém entrou em contato alegando alguma falha? ontem eu coloquei no meu blog e estava tudo ok. hoje logo pela manhã não estava funcionando. retirei os códigos e coloquei todos de novo no lugar seguindo as dicas do seu post só pra testar se eu não tinha feito nada errado, fiz sem edição nenhuma pra ter certeza que não era nenhum erro meu, e pronto, tá desse jeitinho mesmo. o nome fica lá, o conteúdo "oculto" fica a mostra e fica tudo muito feio. enfim.. só relatando (:
    se souber de alguma modificação ou algum outro menu que funcione da mesma maneira no qual eu possa utilizar imagens no título, eu agradeceria muito! no mais, permanecerei com o menu o exemplo de menu no meu blog, só pro caso de voltar ao normal. obrigada desde já!

    ResponderExcluir
  79. vamos testar o código e criar uma pagina de demonstração

    ResponderExcluir
  80. veja aqui a demonstração http://dicasparablogs.net/menu-expansivel.html


    atualizamos um arquivo do código, veja que no começo mudamos o endereço <script src="https://sites.google.com/site/tutoriaisblogger/menu-expan.js.....

    ResponderExcluir
  81. Eu estava justamente procurando por isso. Bacana! Mas tenho duas dúvidas. A primeira é em que posição dos Estilos CSS eu devo colocar o código de estilo, no início, no fina, depois de que? A segunda dúvida é quanto a terceira parte do código. Primeiro você apresenta a div collapsiblePanel1 e a class collapsiblePanel (sem o 1). Então depois, nas explicações sobre como colocar mais de um menu você coloca a classe com o número 1. Afinal, na div que inicia a terceira parte do código a classe tem ou não o número 1? Valeu.

    ResponderExcluir
  82. a parte CollapsiblePanel1 é uma identificação do menu no caso de crair mais de uma atraves deste estilo seria possivel usar formatação diferente neles

    ResponderExcluir
  83. oi Fabiano, entendi isso que você falou. mas eu queria saber se a classe, do primeiro menu tem ou não o 1. É id="CollapsiblePanel1" class="CollapsiblePanel" ou id="CollapsiblePanel1" class="CollapsiblePanel1">? aguardo

    ResponderExcluir
  84. é como publicamos aqui id="CollapsiblePanel1" class="CollapsiblePanel"

    o id é ...panel1

    ResponderExcluir
  85. Acho que o código parou de funcionar de novo :/
    porém, não tenho certeza, renomeei o blog e coloquei num novo domínio, isso pode ter de alguma forma louca, interferido?

    ResponderExcluir
  86. trocar o dominio não influencia no codigo

    ResponderExcluir
  87. eu já imaginava, mas então, porquê não está funcionando? eu não alterei nada no código e de repente parou de funcionar :/
    obrigada (:

    ResponderExcluir
  88. pode ser um erro momentaneo no site de hospedagem de alguns arquivos, vou verificar, mas se não fez alteração deve voltar ao normal sozinho também

    ResponderExcluir
  89. Fabiano to com um pequeno Problema Com esse Codigo e teste em dois blogs meus um Com o dominio blogspot e o codigo funcionou Certinho com o mesmo template q eu uso com o Dominio com.br do meu Site queria sabe se e erro do meu dominio ou da configuracão :?

    ResponderExcluir
  90. é muito estranho isso, não tem motivo para o dominio influenciar no funcionamento do código, infelizmente não sei como resolver isso, mas acho que deve ser algum outro problema

    ResponderExcluir
  91. Boa noite Fábiano.

    Eu coloquei o slide de postagem no meu blog daí então as abas do menu expansivo não quis abrir. O que pode te dado erro?

    http://www.tvsbuna.com

    Espero que possa me ajudar!

    Abraço!

    ResponderExcluir
  92. infelizmente alguns códigos geram conflitos com outros.... seria necessário achar e trocar as variaveis utilizadas neles... mas isso é meio complicado de fazer.

    não publicamos outro tutorial com slides das postagens pois aqueles que testamos deu algum tipo de erro em algum dos navegadores ou era complicado demais para instalar

    ResponderExcluir
  93. Oi, então, eu estou um pouco perdida, eu não achei onde está : " Entre na pagina editar html e ache ** então coloque isso antes dela: ". Onde fica a página editar html ? :s
    obrigada !

    ResponderExcluir
  94. a pagina editar html fica numa aba da pagina designer.

    entre no painel do blog , clique em designer, html

    ResponderExcluir
  95. Fabiano,
    é necessário haver o arquivo java, em algum servidor.
    Boiei nesta parte. Tambéme stou começando. no seu src= você direcionou para um arquivo java. Tem como eu produzir o mesmo arquivo e colocar no meu próprio servidor para agilizar a abertura do site?

    ResponderExcluir
  96. sim é possivel hospedar os arquivos java em muitos sites de hospedagem só precisa do arquivo

    ResponderExcluir
  97. Fabiano, não sei se estou no post certo mas tb não estou sabendo onde procurar. Eu queria criar no meu blog um menu igual a este seu, não precisa das setinhas, mas quero algo com cara de menu mesmo e não aquelas coisas feias de mostrar data como o blogspot/blogger mostrar. Será q vc pode me ajudar? Eu tenho um site de fotografia e queria criar uma postagem para cada trabalho e dispor num menu mais bacana.

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

    ResponderExcluir
  99. Gina Lima Fotógrafa

    sobre modificar os marcadores veja aqui: Personalizar gadgets do Blog, é com esse tutorial que colocamos as setinhas...

    sobre não mostrar a data é só entrar na pagina design do blog, clicar para editar a postagem, lá tem a opção do que vai ou não mostrar, inclusive a data

    ResponderExcluir
  100. Obrigada Fabiano... vou tentar aqui depois...

    ResponderExcluir
  101. tem como tirar o link debaixo escrito: Widget Slides das Postagens Recentes ?????

    ResponderExcluir
  102. Samuel
    você não pode retirar esse link...

    ResponderExcluir
  103. aff, queria tirar, o slide é otimo, só uq estrago foi o link em baixo D:
    Quebra um Galho aee '

    ResponderExcluir
  104. cooquei aqui ficou belezinha..

    so quero saber onde coloco os links para as palavras q estao marcadas com a seta..

    musicas-- titulo

    rap <- link 1
    reggae <- link 2 etc
    axe <-
    hip hop <-
    dance <-
    house <-
    sertanejo <-

    ResponderExcluir
  105. marcos
    isso depende de como faz para colocar essas palavras no blog? são marcadores? se for os links são automaticos...

    se for um gadget pode usar o gadget de lista de links que a janela já pede o endereço do site

    ResponderExcluir
  106. são postagens..
    pego o link da postagem.. ou seja, da pagina em q a postagem aparece sozinha.. e coloco onde ?

    -------------

    alguns outros modelos de menus tem uma opção assim :
    < option value = " http: / /link1" / >Link Um

    ResponderExcluir
  107. Marcos
    isso é um menu jump... igual esse para selecionar o perfil que deseja usar para fazer o comentário logo abaixo da caixa... ,veja aqui o código dele: Menu de Salto

    ResponderExcluir
  108. ahãm.. tenho esse menu aqui, so q não gostei dele não, o que mais gostei foi o expanssivel ..
    ainda tenho duvidas..mais não vou ficar tomando seu tempo n ..

    uma ultima pergunta.. o link coloco onde tem ">Conteúdo Oculto</ ???

    apanhei agora .. hhehe

    ResponderExcluir
  109. essa parte do conteudo oculto é o que vai aparecer quando clicar na barra do menu

    ResponderExcluir
  110. ok.. percebi, so q a parte q aparece quando clico na barra, aparece em forma de palavra não de links,queria clicar nessa parte que aparece, em seguida abrir a pagina que está a postagem..

    axo q não to sabendo explicar direito..
    da uma olhada nesse site..onde ta escrito bandas.. é mais ou menos dessa forma q to falando

    http://www.baixakireggae.com/

    ResponderExcluir
  111. opa..olha eu aqui dnovo..k

    .... conssegui colocar o menu, perssonalizar, colocar links no menu oculto etc ..

    fico 10 !
    _______________________

    so que quando coloquei outro menu, em outro gadget, em outra parte do blog, um dos menus travou, não expande,so funciona quando excluoo um dos dois, e agora ?

    como faço p colocar mais de um menu no msm blog ?

    responde so mais essa.. =) porfavor ..

    ResponderExcluir
  112. Marcos
    deve ser possivel fazer... só que precisa montar o CSS com a formatçaõ dos links

    ou seja você usaria todo esse código para cada uma das bandas

    ResponderExcluir
  113. ((((( CollapsiblePanel1 ))))" class="CollapsiblePanel"<<<--parte de cima

    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(((("CollapsiblePanel1)))<<<--parte de baixo
    ___________________________________________________________________________

    conssegui faze.. em

    em ((((( CollapsiblePanel1 )))) na primeira linha, so colocar2 no menu2, ou 3 no menu 3..

    e em ..

    (((("CollapsiblePanel1))) na parte de baixo, so so colocar2 no menu2, ou 3 no menu 3..

    e assim vai..

    _______________________________

    pelo menos aqui ta funcionando assim..

    =)

    ResponderExcluir
  114. Marcos
    esse menu envolve varios códigos não é recomendado usar como citou no exemplo o html ficará muito grande e as chances de erros são imensas...

    seria melhor baixar um programa para editar html, criar sites e gerar o código nele

    ResponderExcluir
  115. pode me tira uma duvida quando eu coloco o menu qualquer que seja quando cliko na paginas aparece essa pagina nao existe oq faço?

    ResponderExcluir
  116. ReinoSombrio
    você está colocando o http:// no endereço dos links? se não colocar dá erro.

    por exemplo se colocar na sua pagina um link para nosso blog usando só www.dicasparablogs.com.br vai dizer que a pagina não existe, tem que usar assim: http://www.dicasparablogs.com.br

    ResponderExcluir
  117. peço desculpa, eu nao estou a conseguir fazer, apareçe lá omenu mas ele não desaperece nem aparece so fica lá estático.
    O que faço?
    Se poderem mandar a resposta para o mail dafilipe@hotmail.com agradecia muito.

    ResponderExcluir
  118. deve ser algum detalhe do código que modificou errado ou não colocou. esse menu expansivel é cheio de detalhes para alterar

    ResponderExcluir
  119. Olá, preciso de uma ajuda aqui.

    Quando eu coloco mais de um item em um dos menus apenas o primeiro fica "escondido". Gostaria que me dissessem aonde eu tenho que modificar (se tiver como modificar) para que todos os itens do menu fiquem "escondidos" e só apareçam quando eu clicar nele.

    ResponderExcluir
  120. @Castro todos escondidos? o menu completo?

    se for para isso precisaria criar um sub menu dentro do outro mas precisa entender de html para fazer isso.

    pode usar um programa de editar html para criar o menu e depois usar no blog

    ResponderExcluir
  121. Amigo antes de tudo obrigado pela dica. Tinha como mudar a cor quando o visitante passar o mouse em cima do título? Seria interessante para saber que existe outros ítens escondidos... Veja como ficou o seu código em: www.bibliaholistica.blogspot.com.br

    ResponderExcluir
  122. as configurações estão no código ao passar o mouse é o estilo

    .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover

    que está no final do tutorial

    ResponderExcluir
  123. Fabiano, eu adicionei e funcionou perfeitamente, mas existe como eu colocar um texto e adicionar "veja mais" aí quando as pessoas clicarem mostrar o resto, deslizando?

    ResponderExcluir
  124. sim, o resto só aparece quando passa o mouse

    ResponderExcluir
  125. Olá Fabiano Roberto,
    Eu coloquei o seu menu no meu blog e estava tudo perfeito até eu comprar o domínio. Quando fiz o encaminhamento do blogspot para o (.com) não recolheu mais...
    É possível concertar esse erro?

    www.bibliaholistica.com

    ResponderExcluir
  126. tente retirar e colocar novamente os códigos com os links do dominio no menu

    ResponderExcluir
  127. Já tentei, inclusive colocando o menu exemplo que você deu no post (titulo do menu e conteúdo oculto) que não tem nenhum link. Quando eu não direciono para o meu domínio ele não funciona (expande), mas quando eu tiro do domínio ele fica normal.
    ....
    Será que o problema não está aqui:

    Usar um host de arquivos ausentes? Não
    Seu host de arquivos ausentes deve ser um subdomínio no mesmo domínio do seu blog.
    http://
    Se você especificar um host de arquivos ausentes, o Blogger irá procurar nesse host, caso não consiga encontrar um arquivo especificado no seu domínio regular. Saiba mais.

    ResponderExcluir
  128. Olá Fabiano,

    Para tentar explicar melhor o meu problema resolvi fazer uma página clone. Ambas estão com o mesmo HTML (uma expande o menu e a outra que está sente redirecionada para o domínio não).


    http://www.bibliaholistica2.blogspot.com.br/2012/08/visao-holistica-de-hebreus.html


    http://www.bibliaholistica.com/2012/08/visao-holistica-de-hebreus.html

    ResponderExcluir
  129. Duanny Jorge tem que deixar marcado com a opção não para arquivos ausentes

    para criar subdominio é de outro jeito veja aqui:
    Como Criar e Configurar um Subdominio no Blog

    e marque a opção de redicionamento para o WWW

    ResponderExcluir
  130. Deu certo Fabiano. Obrigado por tudo amigo.

    ResponderExcluir
  131. Eu confundi tudo. Não tem um jeito mais fácil de fazer isso? Eu qieria colocar no meu blog, mas quero na posição horizontal. É possível?

    ResponderExcluir
  132. Estava procurando uma dica de como colocar uma caixa expansível no meu blog e não estava achando. Parabéns e obrigado. Já testei e ficou legal. A minha ideia é colocar a caixa expansível no meio do blog, criando mais detalhes de alguns assuntos apenas para os interessados. Testei e ficou legal. Apenas adicionei o código dentro do body, e declarei uma css no lay-out com as caracterísitcas da caixa. Dá um pouco de trabalha mas vai ficar legal.

    ResponderExcluir
  133. Respostas
    1. é possível fazer nos marcadores, mas usando os links em html acho que é mais fácil do que adaptar o gadget marcadores

      Excluir
  134. No meu blog de testes não deu certo... Apareceu o menu, mas ele não estava oculto, já estava expandido e não dá pra esconder

    ResponderExcluir
  135. acho que foi um problema com o JavaScript externo (https://sites.google.com/site/tutoriaisblogger/menu-expan.js), mas agora parece normal.

    exclua seu histórico de internet e teste novamente

    ResponderExcluir