Menu Expansivel

Hoje vou ensinar a vcs Como Fazer Menu Expansivel
Vamos Começar:

Procure Por </head>

cole o código ACIMA de </head>

<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;}

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