A primeira coisa a fazer é ir até o HTML do seu blog, procure pelo código:
<HEAD>
*Números em veremelho representam as cores do menu. Troque-as se quiser.
Agora cole todo código abaixo DEPOIS dele.
<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: #000000;
}
.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>
Agora copie este segundo código e cole no HTML/Javascript em seu blog. Faça as modificações necessárias e salve. Você poderá colocar textos, códigos e imagens dentro deste menu.
<h3 class="mypets">LINK 1</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 2</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 3s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 4s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 5s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 6s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
<h3 class="mypets">LINK 7s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>
Olá, olá!
ResponderExcluirSempre com boas dicas!
Que esse parto seja rapidinho e que a felicidade de teres o teu bébé nos braços seja o principio de uma nova vida ainda com mais alegrias.
Beijokas e obrigado por dares a hipótese de ficar a saber tanta coisa.
Também vim trazer votos de um bom parto, hehehe com a disposição deve estar pra nascer, kkkkkkkk fiz até post com gabrielzinho voando na mamadeira do vacas hehehehe, adorei esta dica, minha nossa, tenho que colocar uma pá de coisinhas, é ótimo! beijos elkeeeeeeeeeee
ResponderExcluirEi Mimo, obrigada. Estou aqui ruinzinha, mas na demais. Beijos
ResponderExcluirMary, muito obrigada ! Daqui a duas semanas no máximo estará aqui o esfomeadinho, hehhee
ResponderExcluirBeijos
Olá elke , estou aqui , perguntando onde eu coloco pra fazer esse tipo de expladir tipo o que está no seu assim [+/-] ??
ResponderExcluirGostei muito do menu, mas eu tive q dar uma editada xD
ResponderExcluiro script quebro ¬¬
ResponderExcluirVle mesmo
ResponderExcluirmuito obrigado!
:**
Parabéns esse menu é muito bom,
ResponderExcluirAmei.
Tenha uma ótima semana.
Loira
Ola elki adorei o menu mais eu queria saber se tem como mante-los fechados a cada vez que atualizar a pagina.
ResponderExcluirmassa esse blog
ResponderExcluireu reformei meu blog td aq
parabéns ao dono
Oi :D é possível colocar uma lista de LINKS dentro? Pq pelo que percebi só da pra colocar UM item... E eu gostei muito deste aqui xD Se puder ajudar! (: tem meu e-mail: damn-boi@hotmail.com valeu t+
ResponderExcluirÓTIMO ESSE BLOG. USEI ALGUMAS DICAS QUE ENCONTREI AQUI E VOU USAR MAIS KKKK. PARABENS!AMEI
ResponderExcluirótimo menu ,mas tem com coloca ele na horizontal?
ResponderExcluirmuito grato
Amada Elke!
ResponderExcluirMeu menu do meu blog simplesmente parou de funcionar,e esta abertooo deixando o blog bem compridoooo!
Estou buscando um scrypt para baixar e colocar o endereço no lugar do antigo.
De qualquer forma fico muito grata contigo.Porque na maioria das vezes somente,os tutoriais aqui do seu blog que realmente funcionam.
Olha amiga explica em um tutorial como tu da estilo as paginas estaticas.
Eu não achei ainda por aqui rainha.
Beijos enormes!
La vem moi de novo !!!
ResponderExcluirAmiga o que ocorre que não podemos colocar mais de 7 itens nesse menu?
Muito Grata!
Elke ja podemos fazer esse menu no CSS sem necessidade de usar o javascrypte rainha!
ResponderExcluirDe qualquer forma muito grata pela sua boa vontade conosco!
Vou deixar a fonte: O Blog da Gem@ que esta fornecendo o tutorial e redirecionando ao link de css play.
Beijao!