18 março 2015

Como colocar botão "Voltar ao topo"


   Já faz algum tempinho que coloquei essa opção aqui no blog, e muitas pessoas já estão me perguntando. O botão "Voltar ao topo" facilita muita a vida de um leitor dentro de um blog, principalmente quando ele está lá no final da página do blog e quer voltar ao cabeçalho. Ficar subindo essa barrinha aos poucos não é nada "legal" não é? Pensando nisso resolvi colocar aqui no blog, e recebi muitas perguntas no e-mail de como fazer. É super fácil! Trouxe então o tutorial e mais 9 imagens para vocês usarem no blog de vocês!

Passo a passo:

1- Vá até o Painel do blog > Layout > Adicionar um Gadget > HTML/JavaScript.

2- Cole o seguinte código abaixo:

<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="URL DA IMAGEM"/>', //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:'Voltar 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>

3- Clique com o botão esquerdo na imagem do botão desejado e selecione Copiar URL da imagem.
Disponibilizei abaixo 9 botões para você utilizar.

4- Substitua "URL DA IMAGEM" do código pela URL da imagem do botão.

5- Clique em Salvar e prontinho! Seu blog também terá o botão "Voltar ao topo". *-*

Botões disponíveis:




   Não esqueçam de comentar aqui no blog se deu certinho okay? Se tiverem mais alguma dúvida em relação ao blog é só mandar um e-mail para dallysebrandão@hotmail.com. Ficarei feliz em ajudar vocês! Beeeeeejus lindezas!


Comentários
14 Comentários

14 comentários:

  1. Que amorzinho de tutorial! Vou testar depois ^^

    sweetpoisonteen.blogspot.com

    ResponderExcluir
  2. Adorei esse tutorial haha. <3
    Beijos da Cáh !
    http://feitaparaprovocar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom Carol. fique a vontade para testar! *-*

      Excluir
  3. Ah, que tutorial maravilhoso! E realmente útil, já que essas setinhas no final da página são um atalho e tanto... Só não colocarei a opção no meu blog já-neste-momento porque, atualmente, tenho deixado apenas uma postagem na página inicial, o que torna o trabalho de subir a barrinha lateral perfeitamente suportável (por enquanto), haha'

    O Único Jeito

    ResponderExcluir
    Respostas
    1. Exatamente Lari, eu vi lá, realmente não faz sentido. Beijos lindona ♥

      Excluir
  4. Obrigada!!!
    Isso foi top!
    Já coloquei no meu, grata.
    beijos

    ResponderExcluir
  5. Muito legal esse tutorial.
    Parabéns,ganhou mais uma seguidora!!
    www.estilosamorena.com

    ResponderExcluir
    Respostas
    1. Obrigada minha lindona! Seja bem-vinda viu? ♥

      Excluir
  6. A-do-ro tutoriais pra turbinar o nosso blog!!!

    http://mundocriz.blogspot.com.br

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...