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

Postar um comentário

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