sexta-feira, 22 de outubro de 2010

Menu em abas

image

Menu em aba bem simples e fácil de instalar.

Copie o código abaixo, vá em “Elementos da página” – “Adicionar um Gadget” – “HTML/Javascript” e cole o código.

<style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #77d0ee; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb;  float: left;
    display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
    font-size: 12px; font-weight: 900; color: #222}
    </style>
<form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 370px;" class="TTs">
<a>Aba 1</a>
<a>Aba 2</a>
<a>Aba 3</a>
</div>
    <div style="width: 350px; height: 300px;" class="Halamans">
   <div class="Halaman">
    <div class="Alas">
CÓDIGO DA ABA 1
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
CÓDIGO DA Aba 2
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
CÓDIGO DA ABA 3
    </div>
    </div>
    </div>
    </div></form>
  <script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Na parte vermelha é o título da aba

Na parte azul é o conteúdo da aba, você pode inserir código HTML, textos, imagens….

Na parte verde é a largura da tabela.

Feitas as modificações, salve!

Marcadores: ,

1 Comentários:

Às 20 de março de 2011 22:16 , Blogger Quinha disse...

Nossa muito legal essa dica, valeu messssssssssssssssmo. Estava a um tempão procurando um código simples e eficaz. Muito dez!!!!!!!

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial