12 de ago de 2013

Menu de Abas

Olá anjos!

Me pediram para ensinar aquele menu de abas que uso no meu outro blog, que você pode colocar vários Gadgets em um só. Escrevi o post e deixei ele em rascunho, e quase esqueci do pedido da leitora. Sinto muito por isso, estava tentando tirar férias... mas não deu certo.

O primeiro tutorial que aprendi deu erro, aí eu tive que procurar um novo. Achei no Kawaii World o tutorial que usei, apenas editei as cores do modelo da Kaori. Mesmo que outros blogs tenham postado esse tutorial, eu peguei o código do meu menu no KW e os créditos vão para ele, ok? Estou postando o mesmo código que uso no meu blog, apenas retirei o HTML dos meus Gadgets. 

Esse menu é muito útil para quem tem muitos Gadgets e quer desocupar espaço, mas ele tem seus defeitos, que seria o tempo que ele demora para carregar. Enquanto o blog está carregando, o menu fica todo desalinhado e feio. Para quem é perfeccionista fica horrível. Mas para quem tem internet boa isso não muda nada.




Em um Gadget de HTML/JavaScript cole:

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script>
<link rel="stylesheet" href="http://static.tumblr.com/fmf4w4k/qnsmqro46/estilo.css" type="text/css" media="screen" />
<br />
<div class="tabber">
<div class="tabbertab" title="Aba 1">Coisas da aba 1</div>
<div class="tabbertab" title="Aba 2">Coisas da aba 2</div>
<div class="tabbertab" title="Aba 3">Coisas da aba 3</div>
<div class="tabbertab" title="Aba 4">Coisas da aba 4</div>
<div class="tabbertab" title="Aba 5">Coisas da aba 5</div>
</div><br />
O estilo é o que eu uso no meu blog, borda roxa e fundo cinza. Caso queira mudar, faça o seguinte:

Abra esse link aqui. Copie todo o código que aparecer em um bloco de notas. Mude as cores e os estilos de borda. Na hora de salvar, coloque o nome desejado e no fim, .css Feito isso, hospede em um site de hospedagem (como o Tumblr), e troque pela parte em negrito no código do menu.

Mude os códigos de cada aba para o que você deseja. Espero que ajude! :)


4 comentários:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!