Mix Designer

Anuncie Aqui!

Anuncie Aqui!

Anuncie Aqui!

Mix Designer

Botão subir ao topo com efeitos:Jquery e css3

eaeaw pessoal hj venho trazer um tutorial de como colocar um botão subir ao topo com efeitos bem legais, o famoso Jquery e o css3 q da um estilo tbm de embutir.

Clicke no post para ler o artigo por inteiro.

Obs: Não esquçam de comentar, sua mão não irá cair, sei q as veses pode ser chato mais vcs não sabem a diferença q faz cada comentário, além de nos animar a postar mais coisas nos ficamos gratos e as vezes ainda damos um bonus para vcs, então comentem ae pf, vlw.

Como funciona: O funcionamento é simples. O botão ficará localizado na parte inferior direita do blog. 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 "Layout" -> "Editar HTML".
2º- Aperte CTRL + F e procure por:

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><br /> <a href='#' id='topopagina'></a><br /> <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("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});       $(function() {                     $("#topopagina").scrollToTop();                 });             </script>

4º- Pronto. Agora salve.

Soft Crazy

4 comentários

Share

Comentários

4 Comentários

4 comentários:

Webmaster10 de julho de 2012 às 19:12
show de bola1
ResponderExcluir
Respostas
Unknown1 de agosto de 2012 às 10:11
Muito bom o/ =D
ResponderExcluir
Respostas
Unknown23 de outubro de 2012 às 13:31
Adorei obriga do pela dica...
ResponderExcluir
Respostas
Sérgio Wilker15 de maio de 2013 às 20:46
Ou adicionem pelo modo de gadgets, HTML/Javascript, na página layout.

Deveriam colocar o mesmo código do botão desse blog, menor, esse do post é muito grande.
ResponderExcluir
Respostas

Adicionar comentário

Assinar: Postar comentários

http://www.mixdesigner.blogspot.com.br/