domingo, 21 de outubro de 2012

Tutorial: Menu de abas


Ooi pessoas c; Uma pessoa havia me pedido na ask um tutorial do menu do gadget "Extras" aqui do blog. Ele pode servir como créditos, ou o que vier á calhar para você.
Ele é bem simples, e é do blog Bad Reputation. Então se usar, credite ele e se quiser á mim tambem C: ashaus'
Vamos ao tutorial? Clique em Leia Mais



Vá em Modelo > Editar HTML > Prosseguir e aperte CTRL + F e pesquise por: <head>

Cole o código acima dá 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 e vá para design > Adicionar um gadget > HTML/Javascript e cole o seguinte código onde você queira que o menu apareça:
<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>
Agora basta editar onde manda! Bem facinho! E caso você queira pular uma linha, igual onde tem os Créditos no meu, você escreve <br></br> na frente.
Por exemplo:

<div id="rabbit" style= "display:none">
Muito obrigada: <br></br>
Kawaii-World <br></br>
Jackie Dream <br></br>
</div>
Ou seja, o código <br> pula uma linha no html. Espero que tenham entendido e gostado! Se brotar alguma dúvida, eu estou aqui!

4 comentários:

  1. OMG! Seu blog é lindo! As cores... tudoo *O*
    Awwwn que fofo o seu blog! Está de Parabéns viu? Este paraíso aqui, aaawn tudo de bom! ♥
    Adorei o post sua Linda ~~ <3 Parabéns mesmo!!!! ^-^
    Beijos e obrigada pela visita ^^

    #Seguindo esta Belezura amore ~~ :3

    kawaiitheworld.blogspot.com

    ResponderExcluir
    Respostas
    1. OMMMG MUUUITO OBRIGADA *U* Eu amo MUIIITO seu blog *u* Muito obrigada mesmo pela visita *-----*
      Aiin, que bom mesmo que gostou *u*
      Muiito obrigada denovo KKK' #emocionada *--------------*

      Excluir
  2. Aaain' adorei o Tuto o menu e lindo *-*
    Aaah eu percebi o novo lay hsuahsa, ficou lindo adorei !

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: