Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

8/05/2013

Menu Back por Html Strew - Moderadores

Bom gente como pediram esse tutorial lá na ask eu decidi postar esse tutorial pertence ao Tumblr HTLM STREW então todos os créditos para eles. Confiram :
1 - Vá em Modelo > Editar Html e procure por ]]></b:skin> e cole esse código antes da ta procurada.
/*** efeito back por htmlstrew ***/
@-webkit-keyframes pulse {0% { -webkit-transform: scale(1); }50% { -webkit-transform: scale(1.1); }100% { -webkit-transform: scale(1); }} 
.moddib {background: url('SUA IMAGEM AQUI'); height: alturapx; width: largurapx; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;} 
.moddib:hover {background-position: right; -webkit-animation: pulse 1s;-moz-animation: pulse 1s;-ms-animation: pulse 1s; -webkit-transition-duration: 0.5s; }

2 - E coloque esse código a onde você quer que apareça:
<div class="moddib"><a href="SEU URL"><img src="SUA IMAGEM TRANSPARENTE DO MESMO TAMANHO QUE A DO CÓDIGO" /></a></div>

 Se você quiser que esse código seja no header use o código de posicionamento.

<div style="position: absolute; top:-300px; left: 6px;">
-300 altera para cima e para baixo 6px altera para a esquerda (-6px) altera para a direita.

PSD DO ICON 
Clique na Imagem para fazer o download
Tutorial por : Html Strew - Adaptado por : Sugoi TutoriaisPsd por : Jéssica Iro

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.