Como colocar botão de voltar ao topo no blog


1º- Vá em Layout > Adicionar Gadget > HTML/JavaScript
2º- Cole o seguinte código: 

<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.scrollRight() + $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:'Scroll Back to Top'})
.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 em roxo você substitui, pelo URL da imagem. É só hospeda-la em algum site, eu uso o Imgur
Espero ter ajudado, beijos ;3

Botões de Voltar ao Topo


Tutorial: Como colocar o botão Voltar ao Topo no seu blog



10 comentários:

  1. Vc poderia deixar aqui nos comentários ou no post algumas imagens para colocarmos em nossos blogs

    ResponderExcluir
    Respostas
    1. Boa ideia, vou ver aqui para ver aqui para ver se consigo fazer algumas..

      Excluir
    2. Haha, agora que eu fui perceber nisso u-u

      Excluir
  2. Oiw , Eu Não Entendi Como Fazer isso , Tem como fazer uma video aula para mim ?

    ResponderExcluir
    Respostas
    1. Na verdade eu ja tinha feito este tutorial e estava disponibilizado no meu canal youtube.com/DeinaQueren mas para postar no blog, tem que esperar 1 semana pro o Youtube reconhecer o video, e só agora que conseguir postar no post acima. Enfim, espero ter tirado suas dúvidas

      Excluir
  3. Oiii pode fazer um tuto de como colocar a camera gif no blog http://i.imgur.com/pzDULvV.gif ?? para deixar em cima

    ResponderExcluir
    Respostas
    1. Acabei de postar amor, espero que goste. Desculpe pela demora a responder :)
      http://creativeperfect.blogspot.com.br/p/blog-page.html

      Excluir
  4. Você é otima nisso né? Eu queria fazer um blog como o seu, tem como me enviar video aulas por email de por exemplo como colocar aquelas imagens la em cima do blog? Em troca te daria sla...Numeros de famosos e como colocar musica no blog.
    Agradecida,
    Maah : WWW.PATRULHADAMENINA.BLOGSPOT.COM
    E-MAIL: MINESRG8@HOTMAIL.COM

    ResponderExcluir
    Respostas
    1. Obrigada pelo carinho amr, mas não quero nada em troca, faço esses tutoriais pra ajudar as pessoas.. Enfim, eu ja tenho esse tutorial que vc quer no meu blog, aquelas coisas la em cima é um background, se vc quiser saber como colocar aqui está o tutorial: http://creativeperfect.blogspot.com.br/p/como.html

      E vc poderia se inscrever no meu novo blog? Não vou mais atualizar este, apenas o outro.
      >> garotadosfandoms.blogspot.com <<

      Obrigada :)

      Excluir
  5. Olá, pesquisei muito e ainda bem que achei o seu blog!!!! Consegui colocar o "voltar ao topo" com uma facilidade incrível, devido a sua explicação!!! Amando suas postagens, segue o endereço do meu blog, para compartilhar!

    http://ensinoreligiosoemsala.blogspot.com/

    ResponderExcluir