30/11/2012

Meta concluida + Tutorial Menu Deslizante + Ops!

Lindo lindo lindo lindo, quero um *-*

Olá! Tudo bem com vocês? Espero que sim! Eu estou, porque tivemos mais uma meta concluída! Até já passamos dela, no momento estamos com 133, três a mais! E a próxima meta é de 150! 
Enfim, hoje eu trouxe um tutorial bem legal!
Alguns de vocês já devem ter percebido que o menu Extras que muita gente usa parou de funcionar, não sei porque, inclusive aqui no blog, por isso coloquei cada coisa em um gadget, mas hoje eu trouxe um outro menu bem parecido, encontrei no Cherry Bomb, o Menu Deslizante, vamos ver?


Você pode ver ele neste blog: *Aqui*

1. Vá em Editar HTML >> Prosseguir >> Ctrl+F e procure por <head> Abaixo dessa tag você vai colar este código:


<!--- 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>

E salve.
2. Agora clique em Layout e adicione um novo gadget de HTML/JavaScrip e colo o seguinte código:


<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>
O próprio código da as indicações do que alterações fazer, fácil né? Qualquer dúvida perguntem >.<
Não esqueçam de fazer pedidos ali na ask, ok? Please, é muito importante para mim!
Por hoje é só!

Ops! Vocês perceberam que eu postei a tag música da semana ontem? Quando o dia dela é sexta? hoje eu admito, como hoje eu não tinha aula, achei que ontem era sexta viajei legal e passei parte do dia de hoje achando que era sábado perdida no tempo to vendo que nessas férias vou ter que comprar um relógio de pulso com o dia da semana vergonha Mas tudo se resolveu, pelo menos vocês tiveram música antes! Haha

4 comentários:

  1. Eu A-M-O esse menu, sempre uso ! Parabéns pela meta amor, você merece tudo isso e muito mais !! Eu também andei viajando nos dias da semana, também, como não se confundir ? em 5 dias 3 não tem aula .-.

    ResponderExcluir
  2. Amooh esse menu é muito lindo e pratico , !

    Bjs
    Diário Capricho
    Teen Candy Utilitarios

    ResponderExcluir
  3. Ah, que legal.
    Parabens.
    Beijo, Lili
    Princesa Imperfeita // Layout novo!

    ResponderExcluir
  4. Muito Legal esse tutorial,Parabens pela meta,tomara que consiga completar todas
    Espero que cumpra minha meta tbm
    Quem gosta de papo de menina
    Segue pf:
    http://ateliedaitgirl.blogspot.com.br/

    ResponderExcluir