Gostou do blog ? então curta nossa página no Facebook:

Criar um menu expansível no blog

Recebi um recado ou um comentário pedindo para eu postar no blog como criar um menu expansível 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 alterar o texto como você quizer links ou imagens:

Para colocar o menu expansível no blog siga as seguintes instruções:

1° entre na pagina editar html e procure pela tag </head> e coloque esse código abaixo antes dela:

<script src="http://cidadeweb.110mb.com/SpryAssets/SpryCollapsiblePanel.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 alterar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), depois de ter feitos as suas alterações clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina layout, 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>

Altere onde esta escrito titulo do menu por a palavra que você quiser para quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. E escreva o conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, e tome cuidado com a largura do blog.


Quando for usar o menus e os conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, não e preciso fazer 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 estar CollapsiblePanel1 continue com a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, mas cuidado para não esquecer de alterar nenhum deles(um no começo e duas vezes no final) , também cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem.


Referências: dicas para blogs

2 comentários:

lany74 disse...

Parabéns!!! Funciona perfeitamente no IE mas quando coloco no mozilla não funciona pode me explicar porque?

Unknown disse...

brother como assim va umpouco mais acima nao entendi pode me espliuca quero muito botar isso no meu blogger brigado desd jáh

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑