Aviso + Menu Deslizante


  Então pessoal, estava indo tudo bem no eJhonas.com, quando eu de repente, invoco minha "foxiquice" aguda, juntamente com minha burrice.. fui mexer no meu domínio, não sei para que na verdade, mais eu já estava prevendo isso, minha burrice é tanta que dá até medo de ser passado para vocês.. mais enfim, gostaria de avisar á todos, que o eJhonas.com não terá mais (provavelmente), já que não estou conseguindo colocar ele de nenhum jeito pois aparece um erro e acaba impedindo que fique o domínio, mais também o blog não ficará sem um domínio, já comprei outro, só que ele provavelmente chega na Sexta Feira, então gostaria de pedir para todos que são afiliados/tem créditos/ou até mesmo quem sei lá gostaria de me ajudar muitoo, para arrumar o link para "www.ejhonas.blogspot.com.br", avisando o pessoal talvez (Eu peço demais, eu sei!).. Agora vamos para o tutorial porque, não quero mais ficar pensando no que eu fiz, já me soquei e tudo mais. Esse tutorial é sobre um menu em que estou usando aqui no próprio blog, na área de "Link-me, Afiliados e Participo", quando eu vi ele, já adorei, ele é mais bonito que muitos menus ai sabe u-u, e o melhor de tudo, ele é super fácil de fazer, até eu consegui!
Vá em Designer  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)
<head>
Logo abaixo esta tag, cole 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> 
 Salve e feche! Agora vá em Layout  Adicionar Gadgets  HTML/Javascript  Cole:
<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>
 Observação:
 Onde está em negrito em negrito você deverá substituir pelo título que você quer que apareça em cada área , por exemplo, o título do meu para aparecer é "Link-me, Afiliados, Participo".. ai é só substituir.. já onde está sublinhado você coloca o conteúdo em que você quer que ao clicar naquela certa área apareça abaixo. Caso você queira acrescentar ou tirar mais menus basta você colocar mais desses códigos:
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 4</a></center>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 4</div>

14 comentários:

  1. Legal o tuto, se pudesse eu arrumava um domínio .com para mim, mas meu pai acha bobagem XD

    blog-lolandfun.blogspot.com

    ResponderExcluir
  2. Haha' Esses negócios de domínio personalizado é realmente muito chato. Por isso nem quero tentar botar e talz.. Boa sorte aí =X

    Nhannw' Adorei o menu! Ele é um graça e super simples! Vou usar \o/

    ResponderExcluir
  3. Ai que pena, ~~ não é o povo cria varias coisas mesmo!~~

    ResponderExcluir
  4. Eu tenho medo de dominio. Tenho medo de de dar um problema e meu blog for excluido. Mas amei o tutorial! Kissus!


    http://american---girl.blog * spot.com.br/
    <<tire a estrelinha e faz uma visitinha!

    ResponderExcluir
  5. Heey! Amei o tutorial! É muito util, acho que vou usar no próximo layout lá no blog, Kisses...

    oscaminhosocultados.blogspot.com.br

    ResponderExcluir
  6. Olá!!! vim retribuir a visita, adorei seu blog!!! e o tutorial também...
    Já estou ficando por aqui...
    Bjs!!!

    http://nailmypassion.blogspot.com.br/

    ResponderExcluir
  7. Menu super lindo!

    Irracional|Blogspot
    PS:Você também é um ótimo Web Designer! ~~Babando e vomitando Arco-Íris (Isso é possível? o.o)

    ResponderExcluir
  8. Olá! Muito obrigada por visitar meu blog e comentar, o seu também é muito bom! Você pode divulgar o meu?
    Bjss

    http://vitoriamariaa.blogspot.com.br/

    ResponderExcluir
  9. Que pena que você teve problemas com o seu domínio! - O tutorial é super legal, mas estou satisfeita com o meu menu!

    Fico feliz que tenha gostado do meu blog, eu também amei o seu. Afinal eu me inspiro na Britney. ♥

    - xoxo -

    ResponderExcluir
  10. Esse menu é muito prático
    Cat Girl :3

    ResponderExcluir
  11. Adorei o tutorial :D muito legal mesmo, obrigada pela sua visita no meu blog, fico muito feliz com ela!
    adorei o seu blog, estou te seguindo!

    carllagomes.blogspot.com.br

    ResponderExcluir
  12. O menu é lindo! e o tutu ta bem facinho! to pensando em coloca o domínio mas tenho medo de da erro também! beijo

    http://kelly-club.blogspot.com.br/

    ResponderExcluir
  13. ameeeeeeeeeei
    ja coloquei no meu
    obrigadaaaa

    desabafoo1.blogspot.com.br

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo