15 de maio de 2016

7 botões elegantes para "Subir ao topo" no Blogger


Um recurso bem interessante para qualquer blog é um botão discreto para voltar ao topo. Esse botão vai aparecer com um efeito bem legal ao rolar a página.

Para fazer isso é bem simples se você seguir todos os passos. Vou disponibilizar várias opções de botões para vocês usarem de acordo com o layout do seu blog.

*O mesmo botão está sendo utilizado aqui no blog*

Primeiro vamos ao código que será este:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://lh3.googleusercontent.com/-HCbu12aTLJo/VzkyFIJJejI/AAAAAAAAFNE/DVAg5BrpGQQ7pM6QIjqnS6GOc7I6fNtNQCLcB/h120/bt-voltar-ao-topo-laranjado-codigosblogger.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Subir ao Topo!'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
A parte destacada nele é a url da imagem do botão, vou fornecer algumas cores pra vocês, ou vocês mesmo podem criar e personalizar o próprio.

O código acima você deve adicioná-lo no Gadget HTML/JavaScript, para isso, siga 3 passos:

1- Faça o login no Painel do Blogger
2- Vá em Layout no blog desejado e clique em Adicionar um Gadget
3- Selecione o Gadget HTML/JavaScript e cole o código passado acima.

O link destacado no código é o botão com a cor laranja, abaixo estou disponibilizando o mesmo botão em outras cores, basta escolher um e copiar a url e trocar na parte destacada do código.

Amarelo:https://lh3.googleusercontent.com/-nqCbaGkMNSY/VzkxPYHRpkI/AAAAAAAAFM8/as7-5QX9sygrRv9fotPfb0e6mUAzNRO_gCKgB/h120/bt-voltar-ao-topo-amarelo-codigosblogger.png

Azul:https://lh3.googleusercontent.com/-_NRV286n2V8/VzkxPbzznWI/AAAAAAAAFMo/Rrko3MiB0T0Q37aFbtiOa2QyW9aC3TeewCKgB/h120/bt-voltar-ao-topo-azul-codigosblogger.png

Vermelho:https://lh3.googleusercontent.com/-6lBUaMhTM9w/VzkxP4RuIzI/AAAAAAAAFM8/F1n4XbtNvQI22WP2zCUZCcZmg8rtdHOygCKgB/h120/bt-voltar-ao-topo-vermelho-codigosblogger.png

Verde:https://lh3.googleusercontent.com/-JNLBci4YveI/VzkxPivZpgI/AAAAAAAAFM8/j0qZHEl_1gkyszckyZ4ksp_nTydRXUzUwCKgB/h120/bt-voltar-ao-topo-verde-codigosblogger.png

Laranja:https://lh3.googleusercontent.com/-HCbu12aTLJo/VzkyFIJJejI/AAAAAAAAFNE/DVAg5BrpGQQ7pM6QIjqnS6GOc7I6fNtNQCLcB/h120/bt-voltar-ao-topo-laranjado-codigosblogger.png

Rosa:https://lh3.googleusercontent.com/-7hLY6ilX-h8/VzkxPYmZVZI/AAAAAAAAFM8/etMkPPrwcoYoQSQ450OpwEcLwgADEjvbQCKgB/h120/bt-voltar-ao-topo-rosa-codigosblogger.png

Roxo:https://lh3.googleusercontent.com/-YBJ72JyI4P8/VzkxPmlwy7I/AAAAAAAAFM8/7S_iWTWKqG8I3EJh2X6iIjLmNksSFBx6wCKgB/h120/bt-voltar-ao-topo-roxo-codigosblogger.png

Assim que escolher o botão, clique em Salvar.

Dúvidas? deixe nos comentários

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

6 comentários:

  1. Respostas
    1. Obrigado pela visita Alyne, volte sempre ^_^

      Excluir
  2. É possível que eu crie um outro botão, ao invés desse? Pois meu blog possui uma cor tema (no caso o preto) que não está em nenhum URL fornecido por você. Grato

    ResponderExcluir
    Respostas
    1. Olá Pedro,

      Você pode criar o seu próprio botão e hospedar ele, depois pegue a URL e troque no lugar indicado.

      Fiz o botão preto aqui pra você, segue o link: https://lh3.googleusercontent.com/-DBQEOtlth0s/V0zAMuGsnsI/AAAAAAAAFX8/Y8aa-RNd3B45ID5Nw05YDr23Vo81kLwFwCLcB/h120/bt-voltar-ao-topo-preto-codigosblogger.png

      Adicione no lugar indicado e salve.

      Abraços

      Excluir
  3. Você tem seta branca com fundo preto? Desde já obrigada

    ResponderExcluir
    Respostas
    1. Olá Vanessa,

      Tenho esse: https://lh3.googleusercontent.com/-Lx2NiopM5io/WDyH0cJuXjI/AAAAAAAAFmU/w7lQLiuv0twVq3gWh5NmPeMvJeITweV6gCLcB/h120/voltar-ao-topo-bgpreto-codigosblogger.png

      Abs

      Excluir