terça-feira, 22 de novembro de 2011

Botão subir ao topo com Efeito jQuary e CSS3



Já postamos alguns botões aqui no cblogger com a mesma função, porém, básicos na questão gráfica. Agora estou postando  para vocês, um outro botão, mas desta vez com Efeito jQuary e CSS3. Tendo esses dois recursos "grudados", o botão resultou em um efeito leve e atraente


Como funciona: O funcionamento é simples. O botão ficará localizado na parte inferior do blog ao canto direito. Quando posicionamos o mouse sobre ele, o mesmo faz um efeito de transição, deixando maior e automaticamente exibe a palavra subir. Ao clica-lo ele nos leva até o topo da página com um efeito bem bacana.

Agora vamos acrescentar ao seu blog.

1. Acesse o painel principal do seu blog e clique em "Modelo" -> "Editar HTML".
2. Aperte CTRL + F e procure por <body>
3.Abaixo dessa tag cole o seguinte código:

<style>
#topopagina {
background: url("http://dl.dropbox.com/u/47734544/Icones/Subir%20ao%20topo%202.png") no-repeat TOP;
background-color: whitesmoke;
bottom: 5px;
width: 48px;
cursor: pointer;
border:1px solid #ccc;
text-decoration: none;
height:25px;
border-radius: 10px;
padding: 10px;
position: fixed;
right: 10px;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
z-index: 99999999999;
}
#topopagina:hover {
height: 150px;
background-position: top;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
</style>
<a href='#' id='topopagina'></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
      $(function() {
                    $(&quot;#topopagina&quot;).scrollToTop();
                });
            </script>


4. Pronto. Agora salve.

Espero que tenham gostado! Até mais.

10 Comentários:

Às 22 de novembro de 2011 13:35 , Blogger Ebrahim disse...

ai Gedi fica branco o botão.

 
Às 22 de novembro de 2011 18:05 , Blogger Pietro disse...

Verdade! Fica branco!

 
Às 22 de novembro de 2011 22:47 , Blogger Códigos Blogger disse...

Opa, vlw por avisar. Teste agora, e veja se está funcionando.

 
Às 23 de novembro de 2011 12:27 , Blogger Patryck - Admin. disse...

EU vou colocar no meu blog.
O Gedi Caldeira, eu tenho um template e nele não está disponível a opção comentar, o que eu faço: http://fcgols.blogspot.com/

Vlw.

 
Às 23 de novembro de 2011 20:49 , Blogger Patryck - Admin. disse...

Já achei outro template, vlw.

E o negócio de voltar e muito show.

 
Às 26 de dezembro de 2011 21:34 , Blogger Jayr disse...

Muito bom !
Valeu!
To construindo meu blog: internetandonanet.blogspot.com , quem quiser da uma olhada !

 
Às 8 de janeiro de 2012 22:29 , Blogger คłvคяσ мคтσร dσร รคหтσร disse...

ai cara mt legal vlw

 
Às 8 de abril de 2013 15:09 , Blogger Rose Oliveira disse...

BOM DEMAIS!! OBRIGADA

 
Às 24 de agosto de 2013 19:34 , Blogger maurino moreira disse...

ficou show

 
Às 30 de novembro de 2013 22:50 , Blogger felipe sousa disse...

muito show!!! quem quiser ver com ficou acessa ai : http://filmes3gpparaseuasha.blogspot.com.br/

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial