Botão Voltar Ao Topo Meio Transparente Personalizado no Centro do Blogger

Nesta postagem compartilho com vocês este novo botão de subir ao topo da página. dessa vez ele não fica no canto da tela como de costume, mas, fica no centro do blog facilitando assim a sua visibilidade e acessibilidade aos visitantes.

Para colocar em seu blog

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<style>#message a{display:block;display:none;z-index:999;opacity:.8;position:fixed;top:100%;margin-top:-75px;left:50%;margin-left:-90px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:8px 40px 10px;background-color:#000;font-size:18px;text-align:center;color:#fff}</style>
<div class='go-top' id='message'><a href='#'>Voltar ao topo</a></div>
<script>
$(function () {
  $('.go-top').click(function () {
    $('html,body').animate({
      scrollTop: 0
    }, 1000);
    return false;
  });
});
</script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#message a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
//]]>
</script>

Tendo colado o código, basta salvar e pronto!!!

Deixe seu comentário.