Eu estou muito feliz recebendo tantos pedidos. Saibam que eu fico extremamente feliz ajudando vocês! O leitor Geivesson (do blog Diga-se de Passagem) pediu um tutorial:
Esse menu se chama "Menu Deslizante" e é claro que eu vou ensinar a fazer =D Querem conferir o tutorial? Já sabem onde clicar!
Vocês podem ter uma preview desse menu no gadget "Extras" do meu blog: Mrs. Nightshade. Não é difícil de fazer!
Primeiramente, vá em Modelo > Editar HTML. Usando Ctrl + F, busque por <head> . Assim que encontrar, cole o código a seguir ABAIXO dessa tag:
<!--- 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>
Visualize e se estiver tudo certo, salve as alterações. Agora vá em Layout e adicione um Gadget de HTML/JavaScript. Nesse novo gadget, cole o seguinte código:
- Título 1 / Título 2 / Título 3 : É o nome que irá aparecer (e onde você deve clicar). Exemplo: Link-me!, Afiliados, Perguntas?
- Conteúdo do menu deslizante 1 / Conteúdo do menu deslizante 2 / Conteúdo do menu deslizante 3 : Coloque o que você quer que apareça após o clique. Pode ser o código do seu link-me, da sua elite de afiliados, da sua ask.fm, etc.
Eu aprendi no Cherry Bomb, então créditos dados ^^
Dúvidas? Comente ou mande uma pergunta aqui.
Espero que todos vocês tenham entendido.
Beijos,
Mrs. Nightshade.
Entenda o 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>
- Título 1 / Título 2 / Título 3 : É o nome que irá aparecer (e onde você deve clicar). Exemplo: Link-me!, Afiliados, Perguntas?
- Conteúdo do menu deslizante 1 / Conteúdo do menu deslizante 2 / Conteúdo do menu deslizante 3 : Coloque o que você quer que apareça após o clique. Pode ser o código do seu link-me, da sua elite de afiliados, da sua ask.fm, etc.
Eu aprendi no Cherry Bomb, então créditos dados ^^
Dúvidas? Comente ou mande uma pergunta aqui.
Espero que todos vocês tenham entendido.
Beijos,
Mrs. Nightshade.
Muito obrigado, pela auda vou tentar fazer agora
ResponderExcluirOlá! De nada, disponha ^^ Pode pedir sempre que quiser ^^
ExcluirBeijos!
Deu certo, mais eu coloco os afiliados e link me???
ResponderExcluirVocê pode colocar o que quiser, tanto em Título quanto em Conteúdo. Se estiver se referindo ao "Conteúdo" você pode colocar o CÓDIGO da elite de afiliados e do link-me.
ExcluirBeijos!
Já consegui muito obrigado!!
ResponderExcluirDe nada, disponha ^^ Pode pedir sempre² =D
ExcluirO único q não ta dando para colocar dentro é o ask
ResponderExcluirO meu deu certinho, foi só copiar o código da Ask.fm e substituir por "Conteúdo do menu deslizante 3".
ExcluirO laurinha , faz tempo que eu estava procurando esse tutorial e não achava graças a deus você mim ajudou beijos.
ResponderExcluirOlá! Awwwn, é muito bom pra mim saber que eu te ajudei <3
ExcluirBeijos, anjo ♥