Menu deslizante


Olá , meninas ♥
 Tudo bem com vocês? espero que esteja , bom eu exclui o post anterior . porque ,e u mesma quis também , e estou pensando aqui em fazer dois posts por dia -n , não liguem pela falta de posts aqui do blog , sei que falta muitos posts , vou procurar estar sempre aqui postando quantas vezes eu quiser clique >aqui< para pedir algumas coisas ,eu vou entrar no ask e atendo todos eles .

Hoje , eu vou fazer 3 posts pra vocês , é o possível que eu posso fazer , também estou pensando em mudar de layout , mais acho que vou mudar no dia 05/05 , 10/05 , vou decidir-me ,resolvi trazer um tutorial de como fazer aquele menuzinho deslizante ,Eu retirei o tutorial do cherry bomb , créditos  ♥




Abra o modelo no blog ,abra o HTML ,dê CTRL+F e procure por </head> ,acima deste código cole :

<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Salve as alterações e clique em layout ,e adicione um gadget HTML/JavaScript e cole o código abaixo e modificando o que está em negrito :

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3</div>

Ps. 1: Não dá para adicionar mais de 3 
Ps. 2: Antes de colocar códigos de menu tipo o menu cube ,que eu ainda não postei aqui no blog 
coloque um texto o uma imagem ,pois danifica o menu .

4 comentários:

  1. amei o tutorial um dia eu boto no meu blog no meu proxímo layout u.u , eu já tinha visto o menu deslizante antes ele é muito lindo u.u beijos
    já to seguindo aqui ( a muito tempo rs') se gostar segue de volta flor ?

    http://karenkawaiii.blogspot.com.br/

    one kiss amei seu blog u.u

    ResponderExcluir
  2. Eu já usei ele, é muito fofo <3 E economiza um bom espaço, também.
    Amei o tutorial, bem simples :3

    ResponderExcluir

❤ Ofensas e palavrões serão ignorados e excluidos.
❤ Seguindo, segue de volta?Sim mas fale um pouco do post.
❤Nada de pedir post pelo os comentários , se quiser algo vá na página peça .
❤Se quiser pode deixar a URL do seu blog , sempre vou retribuir a visita!
❤Perguntas/Dúvidas , serão respondidas :-)
❤Se não gostou, não use palavras ofensivas.

« »