(Pedido) Menu de abas (extras) + Efeito push



18 de junho de 2013


Post Programado

Oiee gente! como vocês estão? espero que estejam mais que ótimos, eu estou bem feliz pois o #Solta o verbo está dando super certo e tem bastante gente gostando *-* Bom, eu estou com a Ask com vários pedidos mais o tempo está bem curto sorry ;/ hoje trago dois que tem um tempão que pediram, mesmo não gostando de postar tutoriais que já tem em OUTROS blogs, eu vou ensinar.


Vamos aprender? continue lendo
Bom vou ensinar primeiro como fazer o meu "extras" que no caso é um meno de abas super simples de fazer.

Você vai em layout >> adicionar gadget>>HTML/Javascript e lá você cola esse HTML 

<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="Titulo da sua aba">Coisas da aba 1</div>
<div class="tabbertab" title="Titulo da sua aba">Coisas da aba 2</div>
<div class="tabbertab" title="Titulo da sua aba">Coisas da aba 3</div>
<div class="tabbertab" title="Titulo da sua aba">Coisas da aba 4</div>
<div class="tabbertab" title="Titulo da sua aba">Coisas da aba 5</div>
</div><br />
Altere somente o que se pede ou seja "Titulo da sua aba" e "coisas da aba" em coisas da aba, você cola o HTML que você colaria no gadget normalmente. fim!

Agora o efeito push, bom eu acho esse efeito bastante legal PORÉM ele é um pouco complicado de se mexer, se você não entende muito de HTML não recomendo esse efeito. vamos lá Créditos (xxx)

Visualize aqui (xx) ou no meu cabeçalho rsrs


Ai você procura por ]]></b:skin>, e ACIMA cole 

.puxa1 {background-image: URL(LINK DA SUA IMAGEM);
width: LARGURApx;
height: ALTURApx;
display:inline-block;
-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;
margin-right:1px;
}
.puxa1:hover{background-position: DESLOCAMENTOpx 0;
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
Link da imagem- Isso vai depender do efeito que você irá querer o primeiro efeito é uma imagem normal, a segunda são duas lado a lado, e a terceira uma acima da outra. Salve essas como base 

   


Largura - No tipo 1 e no tipo 3, as larguras devem ser o número total, mas no tipo 2 é necessário que seja metade da imagem, para que aparece somente a primeira foto.

Altura - No tipo 1 e 2 deve ser o número total, mas no tipo 3 deve ser metade.

Deslocamento - Você escolhe, no tipo 1 e 2 o deslocamento vai ser o mesmo número da largura, mas você deve colocar um - na frente do número, pois ele deve ficar negativo. Você pode até duplicar o número para que a imagem role mais vezes. Já no tipo 3, você vai precisar fazer uma mudança:

background-position: DESLOCAMENTOpx 0;
 Troque Por

 background-position: 0 DESLOCAMENTOpx;
E para a imagem funcionar cole crie um gadget de HTML/Javascript e cole

EDITE


 <a href="seu link"><div class="puxa1"></div></a>

Se você for usar mais de uma imagem com esse efeito (eu uso três) você terá que criar outra linha de código exemplo 
.puxa2:hover{background-position: DESLOCAMENTOpx 0;
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}

e assim vai indo mas precisa editar do gadget também exemplo 

 <a href="seu link"><div class="puxa2"></div></a>


Créditos KW

14 comentários:

  1. Super úteis os tutoriais, amei o solta o verbo também! Adorei seu blog :)
    http://oblogdamandi.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou diva, obrigada ;3

      Excluir
  2. Adorei a resenha..

    Amei seu blog, estou te seguindo..

    Beijinhos..
    http://kahcastioni.blogspot.com.br/

    ResponderExcluir
  3. Bemlegal o tuto. Esses efeitos devem ficar lindos *__*

    beijos :3

    photoscapeevc.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu coloquei a preview '-' ficam lindos mesmo ><

      Excluir
  4. Amei a postagem! tem um selos para você no meu blog
    espero que goste
    http://delicadakpopper.blogspot.com.br/2013/06/agradecimentos-selos.html

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida, e obrigada ;3

      Excluir
  5. Amei os tutos, bem úteis, ainda mais que você usou o novo HTML como base, já que eu não tenho NOÇÃO ALGUMA de como se usa AUSHAUHSUAS
    Será que você podia fazer um tuto de como usar o novo HTML?
    Ficaria agradecida!
    Beijos!
    Ali.

    bonjour-uneglacee.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou >< é muito fácil mexer no novo HTML não mudou praticamente nada, eu achei que ficou até mais fácil, vou fazer um tuto sim ><

      Excluir
  6. Ótimos tutos! Os efeitos são muito legais, já os conhecia e sempre adorei *-* Kissus ♥

    listen-official.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou >< Esses efeitos são demais mesmo

      Excluir
  7. adorei as dicas flor..obrigada! hehe
    seguindo o blog

    bjoss

    http://jessicamakems.blogspot.com/
    http://youtube.com/jessicamakems/

    ResponderExcluir
    Respostas
    1. Que bom que gostou flor >< irei retribuir

      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