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

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