Olá gatos e gatas ~ Estão bem ? Eu espero que sim! Finalmente consegui colocar aquela "barrinha móvel" na barra de rolagem '-' Eu só conseguia colocar a barra fixa; Mas agora está bem melhor! ^-^
Bom, o tutorial de hoje é de menu deslizante ♥ É um menu simples; mais é bem legal e fica bem legal no blog também e.e ' Você pode alterar as cores para ele ficar mais bonito >.< Ele desliza para baixo quando você clica na frase/palavra *u*' Clique em mais informações para ver o tuto u-u
É um menu bem legal; x Preview // (primeiro gadget) . E também bem simples!
Bora trabalhar >.< , então vá no seu quadro HTML (Modelo>editar HTML) , Aperte Ctrl F dentro do quadro HTML e procure por : <head> , quando achar essa tag , cole esse código abaixo dela :
Bora trabalhar >.< , então vá no seu quadro HTML (Modelo>editar HTML) , Aperte Ctrl F dentro do quadro HTML e procure por : <head> , quando achar essa tag , cole esse código abaixo dela :
<!--- 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>
Não mexa em nada , se não o código não funciona;
Vá no Layout do seu blog (Coluna lateral > Layout) e adicione o gadget HTML/Java script
e cole esse 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>Onde eu negritei, se refere ao título que aparecerá. Onde eu sublinhei, se refere ao conteúdo que aparecerá. Salve e pronto, você economizou 3 gadgets no seu blog. A única coisa ruim nele, é que se você adicionar mais abas ele fica zoado... não fica legal. Mas enfim, espero que tenham gostado.
Créditos do tutorial : Caramelos encantados
Hello amiga, este tuto é simples e muito útil, particularmente gosto muito de utilizar ele. Big beijinhos uma ótima semana
ResponderExcluir____(`*•.¸ (`*•.¸ ¸.•*´) ¸.•* )____
¦ Blog Dany's Place
¦ Tutorial e Dicas
¦ Fan Page
¦ Instagram
Obrigada, querida ^.^
ExcluirAmo seu blog, bem-vinda de volta ♥
Kisses !