AWWN *-* , Muito meigo !
Oii minhas bombinhas de cereja com chocolate , como vão vocês ? , eu vou meio mal, meu Pen drive pegou vírus na escola pela segunda vez , minha mãe vai buscar os resultados das minhas provas amanhã , e eu vou colocar aparelho daqui para o final do mês , mas eu tenho certeza que vocês não estão nada interessados nas minhas crônicas pessoais , certo ? , bom , vamos ao que interessa , tenho certeza que vocês vão pirar com o tutorial de hoje , vou ensinar vocês a colocarem o menu deslizante no blog , clique aqui para ver o efeito , vamos começar ?
Primeiramente vá em Modelo > Editar HTML > Aperte Ctrl + F > 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>
<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 a alteração , e vá em Layout no menu lateral do blogger e adicione um gadget HTML/Javascript , e pronto , onde você quiser que o menu apareça cole o código abaixo modificando os títulos e o conteúdo :)
<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[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>
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>
Prontinho :) , gostaram ? , se sim , comentem ! .
Beeeeeeeijos :*
Créditos ao blog Cherry Bomb
I loved your blog, it is very beautiful, kisses, and keep this way :)
ResponderExcluirWow, thank you so much right, it's great to see that people recognize my work, kisses, and check back often :)
ExcluirU.U GOSTEI, MAS TIPO , CMG NAO FUNCIONOU :(((
ResponderExcluiro q vc acha q eu fiz de errado?
ExcluirAh , eu saber o que você fez de errado é um pouco complicado não acha ? , eu não tenho como te dizer o que você fez de errado porque quem tava tentando fazer era você :) , sinto muito , leia , releia o post e veja se você fez tudo certinho :)
ExcluirBeeijos :*
Adorei o tutorial ^^
ResponderExcluirEu adoro esse menu, pois ele é prático de se aplicar e dá para evitar colocar muitos gadgets com ele ;]
Beijinhos~~> http://paradisecityoficial.blogspot.com.br/
Verdade :)
ResponderExcluirBeeijos :*
Adorei, eu tenho esse tuto lá... Flor, o seu pedido de afiliação foi aceito, já coloquei! Avisa lá se ainda quer... (:
ResponderExcluirBjs
garotas-cupcakes
Amei o blog.
ResponderExcluirVisita lá = http://alucihnadablog.blogspot.com.br/
se puder seguir eu agradeço.
Beijos!