03/06/12

Tutorial - 2 menus que poupam imenso espaço


Oi milkas, como tenho recebido muitos pedidos, vou ensinar como faço o menu no "status" e o "extras"




Para fazer o menu "extras"...
( créditos Chovendo em Paris )


Vai ao html, e procura pela tag <head>
Em baixo dela, cola o código
<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

Adiciona um novo "html/javascript" e cola este código lá :

<!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<div class="tabber">
<div class="tabbertab" title="Aba 1">

<br>
Conteúdo 1

</>
</div>
<div class="tabbertab" title="Aba 2">

<br />
Conteúdo 2
</div>

<div class="tabbertab" title="Aba 3">

<br />
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br />

Onde diz "Aba" metes o título de cada aba, onde diz conteúdo metes o conteúdo.



Para fazer o menu deslizante...
( créditos Bad Reputation )

Vai ao html, procura por <head> e em baixo cola :

<!--- 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>

Adiciona um "html/javascript" e cola :

<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>


Gostaram ?

8 comentários:

  1. Estava doida,por esse tutu o primeiro eu até sabia,mas o segundo ñ,obrigado já estou utilizando e vou por créditos a você tbm :)
    http://cereja-com-morango.blogspot.com.br/

    ResponderEliminar
  2. Eu conhecia esses tutoriais mais realmente são super uteis, ocupam mesmo menos espaço <3
    Garota do olhar sincero||Face do blog

    ResponderEliminar
  3. Já conhecia também, poupam muito espaço e é mais fácil de colocar!


    Pretty Girls Swag

    ResponderEliminar
  4. Oh,Beatriz já coloquei os créditos, não se preocupe,eu não me esqueci,só estava fazendo um post :)
    http://cereja-com-morango.blogspot.com.br/

    ResponderEliminar
  5. Queria saber como você faz aquela faixa lá no final dizendo: Layout feito por Bibi - Cat Girl. Não copie !
    E como deixar de outra cor tipo preto quando fomos tipo copiar uma palavra???

    ResponderEliminar
  6. HEEY! A enquete para a votação da Batalha de blogs já está colocada.
    encantosdeumaadolescente.blogspot.com

    ResponderEliminar
  7. DEUSES ! <33 esse foi o único tutorial de menu deslizante que funcionou para mim.
    Obrigada.
    Beijous | MinhaVidaForadeSeerie.blogspot.com.br

    ResponderEliminar
  8. Ensina a fazer menu assim, mas com tags, e cada tag aparece os posts, tipo nesse site> http://johny-movieprett.blogspot.com.br/ < embaixo, lá nas tags com gênero de filmes

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias