Menu Deslizante

| |
Oie pessoal hoje vou ensinar a fazer um Menu Deslizante ele é indicado para sidebar, para diminuir espaço .
Ele é ótimo pois da uma aparência melhor para o blog, não deixa o blog cheio de Gadgets , inclusive eu estou usando no meu blog veja a imagem:




Para visualizar melhor clique aqui



Bom Então 1º Passo

Então, abra o HTML do seu blog, e cole o código a seguir abaixo da tag <head>
<!--- 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. Agora clique em "Layout" no meu lateral do blogger. Adicione um gadget de HTML/Javascript no lugar onde você quiser que o "menu" apareça e cole o código abaixo, modificando os títulos e o conteúdo de cada link.


<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>
 Bom os trechos em destaques você ira fazer as alterações. Em Título , você colocar o título do seu Gadgets
tipo Facebook, já onde está escrito "Conteúdo do menu deslizante" você colocará o código do seu Gadget, por exemplo: o código do Facebook .. Não tem erro basta colocar tudo direitinho que seu menu deslizante irá funcionar perfeitamente.

Nenhum comentário:

Postar um comentário

Antes de fazer um comentário, leia:

• Os comentários são moderados para que eu possa ter um melhor controle sobre eles.
• Deixe o link do seu blog no final do comentário.
• Seja educado (a) comigo e terá o melhor de mim! Faço tudo isso, não por obrigação, mas porque gosto.
• Seja específico ao pedir ajuda e eu te ajudarei no que for possível.
• Não ensino como fazer coisa assim-assado do blog do fulano.
• Não se dê ao trabalho de comentar com a intenção de me ofender. Eu não ligo para opiniões alheias e não tenho o costume de guardar comigo as ofenças que recebo.

Obrigada por comentar! :)

© Semeadores da Palavra de Cristo - 2013. Todos os direitos reservados.
Criado por: Hellen Isterfani.
Tecnologia do Blogger.
imagem-logo
Ultimas