16 de fev de 2013

Menu de Abas

Ooi gente!
Como vão? Espero que estejam bem, estou postando a essa hora porque fiquei o dia todo fora de casa, e me ocupei em responder comentários, terminar umas páginas do meu caderno de livros (que eu pretendo mostrar para vocês) e brigar com o computador que desligava toda hora.

Ontem uma leitora daqui do blog me pediu esse menu do gadget "Amigos" e do "Extras", primeiramente achei que eram os efeitos, mas me toquei que era nada mais, nada menos, que o famoso menu de abas. O tutorial que estou trazendo foi encontrado no Kawaii World, e não vi nenhuma restrição na postagem, então decidi por repassar.

O menu fica do jeito do nossos gadgets citados acima, mostra um conteúdo, tem várias abas, e quando você clica nelas, vai mudando de conteúdo. não sei explicar as coisas Vamos ao menu:

Cole o seguinte código em um gadget de HTML/JavaScript:

<link rel="stylesheet" href="http://drikoti.net/Tabber/tabber-cinza.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://drikoti.net/Tabber/tabber.js"></script>

Agora, em outro Gadget, cole:

<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo da aba 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo  da aba 2</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo da aba 3</div>
</div>
<center><br />
Se quiser outro espaço, cole o seguinte código antes do último </div> :
<div class="tabbertab" title="Aba nova">
<br>
Conteúdo da aba nova
</>
</div>
Pronto! Seu menu de abas estará prontinho se você seguiu todos os passos. Lembrando que o menu não é meu, eu peguei no Kawaii World.

Espero que tenham gostado, até mais!

7 comentários:

  1. Acho muito útil esse tutorial! Mas como você deixa colorido o selecionado? Não consigo fazer isso no meu kk
    Muito explicado o tutorial!

    ResponderExcluir
  2. Esse menu deixa bem mais organizado o blog, e também fica super lindo. Adorei, beijos
    http://blogpurepoison.blogspot.com.br/

    ResponderExcluir
  3. Vou usae o tutorial pois acho muito útil e deixa o blog mais organizado ♥
    #May-Sun

    Nosso Diário Nada Convencional

    ResponderExcluir
  4. Ótimo tutorial, muito útil e tem um efeito lindo!
    Amei!
    Bisous, Pequeno Muffin.
    pequenomuffin.blogspot.com

    ResponderExcluir
  5. O código é bem útil já que o original esteve dando muitos erros. Repassar é sempre importante. bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  6. Ahh adorei o tutorial,esse menu é bastante útil..
    minha mãe me ensinou

    ResponderExcluir
  7. Vou tentar fazer isso, no meu blog de teste pra ver como fica...
    Milena,
    você já tá seguindo o blog?
    Abraço :)

    relicariodasrafleur.blogspot.com.br

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.