5 de dez de 2009

Menu em abas de fácil instalação


Sem delongas e tá, tá, tá de código e expandir nada, esse código para menu em abas é pá, pum. Copiou, colou no HTML/Javascript e pronto. Depois, lógico que você terá que inserir os códigos do que você quer linkar né ? Mas então vamos lá, num zás tráz.








<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>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
    <div style="width: 350px; height: 300px;" class="Halamans">
   <div class="Halaman">
    <div class="Alas">
   INSIRA O CÓDIGO DO LINK 1
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    INSIRA O CÓDIGO DO LINK 2
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    INSIRA O CÓDIGO DO LINK 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>



Código na cor verde é a largura da tabela.
Código em azul é o título da tabela.
Código em vermelho é onde deve ser inserido os códigos que vc quer dentro da tabela.

12 comentários:

  1. Elke, muito bom o menu, para iniciantes,
    mas eu trouce uma "descoberta" xD
    tava lá eu, editano o layout do meu blog,
    e acabei editano o script do:
    http://templateseacessorios.blogspot.com/2009/09/slide.html
    E editei ele, traduzindo o botão de parar, que aparenta
    funcionar, e a imagem, que passava... espero que seja de
    sua utilidade... o url do script é esse:
    https://dl.dropbox.com/u/3360493/sliderpreto.js
    aah, e para ve-la em ação, entre no meu blog:
    http://manadablogger.blogspot.com
    Bjos elke, feliz natal =D

    ResponderExcluir
  2. Estas dicas são muito importantes, muito válidas!
    Pra mim difícil de entendê-las por medo de mexer e estragar o que fiz do meu blog, mas tudo que vem pra ajudar, como disse, é muito válido.
    Entendo pouco de HTML, mas nem de script, nem de CSS ou afins, infelizmente.
    Abraços!

    ResponderExcluir
  3. Por que este "Não vou a seu blog, não dou consultoria e não
    adiciono NINGUÉM ao MSN"?
    Teu blog é legal, ajuda muita gente, acho que já andou me ajudando (outro post), mas numa internet onde tudo é comunicação, não sentou bem.
    Abraços e boa semana!

    ResponderExcluir
  4. Oi Mauro S , tudo bem ? Bom, vou lhe dizer o porque, há pessoas sem noção que me perguntam a respeito de dicas que já postei aqui no blog e há outras que querem que eu arrume seus blogs, pois bem, não tenho tempo para isso e mesmo se o tivesse não sou obrigada a fazê-lo, certo ? Note que faço templates e blogs por encomenda e por este serviço cobro. Veja que já ensino de um tudo aqui neste blog, inteiramente de graça e como se não bastasse "linko" aqui uma quantidade significativa de blogs com a mesma proposta que o meu, de ajuda. Se a pessoa quer exclusividade e quer um blog com os scripts, efeitos, imagens e o que mais quiser eu faço com o maior prazer mas por isso preciso cobrar, afinal pago água, luz, telefone, net, como, moro, visto como todo mundo. Já cheguei a passar 18 horas seguidas trabalhando, levantando apenas para as necessidades básicas, mas preciso trabalhar, como todo mundo e esse é o meu trabalho: fazer templates e blogs por encomenda. Espero que tenha compreendido a minha postura. Um abraço, sem mais para o momento !

    ResponderExcluir
  5. Ei Mimo, legal né ? Gostei muito também. Beijos

    ResponderExcluir
  6. Olá!
    Queria apenas uma informação, eu copio e colo esse código onde no meu HTLM?
    Desculpe a ignorancia... Sou iniciante!

    ResponderExcluir
  7. eu posso colar em qualqur lugar do html?

    ResponderExcluir
  8. ARRETADAAAA!!!
    Procurei esse tutorial por 11 meses e nem a mestra Ariana e nem a maravilhosa Gem@ mostram algo assim minha riainha.
    Rodei e perguntei a Clau do Darkessblog e ela tbm,disse que nunca soube se realmente funcionava com 3 abas.
    Agpra chego aqui depois de muitoooo tempo,e encontro esse show de aula,dica e maravilha!

    ResponderExcluir
  9. Seu site tem varias dicas ,todas ótimas ,eu so não gosto do templante que voce usa , a imagem do fundo ate demora para carregar... xau

    ResponderExcluir
  10. Olá Elke, tenho proucurado a muito tempo abas assim, só que eu gostaria para usar dentro das postagem com: fazendo mais resumo de detalhes do meu blog...resumindo Descrição, Músicas...etc ou se você conhece algum fico grata b j ..e parabéns pelo seu blog

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube