Como escrevi em outro post (veja exemplo), aqui está o tutorial para criar o menu para o seu blog.
1º passo:Copie e cole esse código abaixo logo após a tag <HEAD> do seu blog. Salve.
<script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js">
</script>
<style type="text/css">
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}
</style>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
2º passo:Copie e cole esse código onde você quer que apareça o menu no blog. Na lateral (sidebar) por exemplo, e pronto.
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>
<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
TEXTO AQUI OU UM LINK PRA IMAGEM COMO NESSE EXEMPLO...The dog is a domestic subspecies of the wolf...
</div>
<h3 class="mypets">Cats</h3>
<div class="thepet">
TEXTO AQUI
</div>
<h3 class="mypets">Rabbits</h3>
<div class="thepet">
TEXTO AQUI
</div>
<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>
Obs:Troque os nomes das abas como quiser, e insira o conteúdo que desejar em "AQUI TEXTO". Qualquer dúvida entre em contato ou deixe um comentário.
Resumo
Gostou? então deixe um comentario
Software que simula como você ficaria caso fizesse alguma cirurgia plástica
Simule plásticas e correções diversas no corpo a partir de fotos.
Vejam que interessante esta faixa vermelha no céu! Parece até coisa de ET, mas não é não! é simplesmente uma nuvem gasosa que o Hubble detectou com o filtro de hidrogênio chamado H-alfa. A nuvem é o que sobrou da explosão de uma supernova há mais de 1.000 anos atrás. A SN1006 que explodiu a 7 mil anos-luz de distância foi provavelmente a supernova mais brilhante já vista da Terra. As cores das imagens do Hubble são uma boa aproximação das cores reais. O hidrogênio-alfa, por exemplo, tem uma cor avermelhada, por isto escolheram esta cor para representá-lo nesta imagem. As outras cores foram tiradas com filtros verde e azul. Fonte[
![[Valid RSS]](http://img182.imageshack.us/img182/6753/validrsscv2.png "Validate my RSS feed")
