Menu de abas para widgets

3 de abril de 2015



Hey gente! é tão bom voltar a postar novamente :3 como estão vocês? espero que bem. Como estou de "férias" estou me organizando para o TF e outros projetinhos que estão por vir :3 em breve vocês irão saber.

Bom o post de hoje é bem rápido, um tutorial que alguém está cobrando na ask, peço sinceras desculpas por não ter postado antes ok? de verdade. Então, é o tutorial do famoso menu de abas, na postagem vou postar dois modelos diferentes ♥

Então vem.



Primeiro modelo


Esse é um "pouquinho" mais complicado (mentira gente,super fácil de fazer) São somente dois passos :

1 - Entre no HTML do seu blog, clique em alguma parte do código e dê ctrl+f, irá aprecer uma caixinha, nela cole <head> e logo ABAIXO desse código cole o seguinte;

<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
Pronto agora é só salvar.

2 - Em layout adicione um gadget de HTML/Javascript e nele cole


<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3</div>

Modifique onde se pede onde tem título (é o titulo obviamente) do texto, e onde fica conteúdo do menu você coloca o HTML do gadget que quiser (ex:afiliados) salve e pronto!



Segundo modelo


 Esse é o modelo atual aqui do blog, gosto muito desses menus porque polpam bastante espaço, e deixam o blog mais organizado.

Esse é mais simples que o primeiro para instalar

Apenas um passo (você pode modificar a cor dos links)

Em layout adicione um gadget de HTML/Javascript e nele cole o código abaixo:

<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/dlelfro/Ic9mha75p/abas.css" type="text/css" media="screen" /><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 />

A parte em negrito é o css da cor dos links, (aqui no blog usamos roxo) para mudar é só substituir essa parte por algum dos codigos abaixo, lembre-se somente esse trecho. 
(http://static.tumblr.com/dlelfro/Ic9mha75p/abas.css)

Linhas de css e cores:

http://static.tumblr.com/cxinapq/AbKmkp0le/menuazul.css 
http://static.tumblr.com/cxinapq/9Uumkp0zs/menurosa.css 
http://static.tumblr.com/cxinapq/ZlLmkp19x/menuverde.css 
http://static.tumblr.com/cxinapq/P8Dmkp1ds/menuroxo.css

Modifique onde pede e salve! Eu recomendo editar em algum editor HTML antes de colocar direto no blogger, fica mais fácil para editar. Recomendo esse editor.







24 comentários:

  1. Oi c:
    Gostei muito dos modelos, o tutorial foi bem explicadinho :3
    Acho que irei usar algum deles em um layout novo.
    Até depois õ/
    ||Crazy Cake ||

    ResponderExcluir
    Respostas
    1. Eu também adoro esses modelos :3 são super úteis

      Excluir
  2. Olá.
    Eu gostei dos dois modelos,mas principalmente do segundo.
    Realmente gostei,pena que já terminei meu layout e instalei se não colocaria-o .
    Realmente gostei do segundo modelo.

    Sarang Cute

    ResponderExcluir
    Respostas
    1. Eu gosto dos dois também, quando fiz o layout eu não lembrava onde /em que blog tinha o código do primeiro ai instalei o segundo ahauhaa é muito útil mesmo

      Excluir
  3. Oi amôura... vim agradecer e retribuir a visitinha. Obrigada viu !

    Beijão !

    | O Blog Que Não é Blog |

    | Sorteios Na Web |

    | Cadastre-se no Egrana |

    ResponderExcluir
  4. Adorei o tutorial , vou tentar fazer no meu blog de testes ai se der certo eu coloco e dou os devidos créditos *-*
    Beijos Isa ♥
    Visita ?
    Uma Madrugada

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida ♥ é super fácil mesmo, com certeza dará certo

      Excluir
  5. oi flor , adorei o post , o tutorial ficou ótimo , desculpe por não aparecer , mas é que eu estava sem internet !
    beijos
    http://garotaantenadas2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também estava sem internet esses dias, quem bom que gostou do post <3

      Excluir
  6. oiiin gente eu quero fazer rsrsr bem simples ^^
    quero afiliaçao ><
    visita----> estilonyu.blogspot.com.br

    ResponderExcluir
    Respostas
    1. É super simples mesmo :3 voce vai adorar o resultado, o seu blog não está abrindo no meu navegador :(

      Excluir
  7. Ameii! Não sabia como fazia isso. Agora sei huhuah.

    www.creativep4nda.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida! é muito fácil ahahsa

      Excluir
  8. Que fofo, adorei♥
    Muito sucesso

    http://sonhosejovens.blogspot.com.br/

    ResponderExcluir
  9. já vi, fica lindo :3

    http://thesweetmomentts.blogspot.com.br/

    ResponderExcluir
  10. Olá...
    :)
    Deixei um recado para você em:
    http://jaquevirtual.blogspot.com.br/2015/03/look-do-dialooks-para-querer_22.html
    Aguardo você no link acima....
    Até, mais...
    JaqueVirtual...

    ResponderExcluir
    Respostas
    1. Olá querida! irei ver sim o recado, obrigada!

      Excluir
  11. Estamos de volta, de casa nova e já tem post novinho esperando por você!!
    Curta a nossa página no Facebook, é só clicar: https://www.facebook.com/blogrolamuito

    Muitos beijinhos..

    ♥ www.rolamuito.com

    ResponderExcluir
    Respostas
    1. Que bom que voltaram! vou ver o blog agorinha!

      Excluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo