Tutorial - Menu de Abas


Boa madrugada, leitoras e leitores.

Hoje trouxe um tutorial bem simples, que é o menu de abas. Acho ele bem prático, para não acumular tanto gadget. O bom desse menu é que não é preciso usar muito HTML, então, quem não entende disso ainda, é um tutorial bem útil pra começar.

Veja um exemplo desse menu, clicando aqui. Então, vamos aprender como fazer?
Vá em Layout > Adicionar Gadget > HTML/JavaScript e cole o código abaixo:


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

Depois disso, salve.

Agora adicione outro gadget com HTML/JavaScript e colé o código abaixo:
<!-- Início Menu Abas --><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 --><center><br />

Após isso, salve o gadget.

Bom, agora vamos entender o código.

O que está em negrito, você coloca o nome da aba que quer que fique, como por exemplo: "Créditos", "Afiliados", Link-me".

O que está sublinhado, você escreve o que quiser na aba. Se quiser colocar alguma imagem, pode hospedar ela no Tinypic, que gera o código em HTML da imagem.

Entenderam?
Se alguém não entender, só deixar nos comentários qual é o seu problema, que eu te ajudo! Esse é meu primeiro tutorial, e deve estar horrível! Mas com o tempo, eu melhoro.

Beijo e boa noite pra todas vocês! ♥

2 comentários:

  1. Muito útil , até uso no meu template.

    Beijos.
    http://fantasy-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Também acho útil, mas não vou usar no meu template ainda :3

      Excluir