Como inserir botão subir ao topo no Blog

quinta-feira, outubro 10, 2013

Hello girls! Como prometido, hoje trago o tutorial para blog "Como inserir botão subir ao topo no Blog", ele foi solicitado anteriormente, assim como outros que vou publicar durante as próximas semanas. O Tutorial é super mega fácil e traz muito mais funcionalidade e dinamismo para o seu blog.

Copie o código a seguir, faça as alterações necessárias, vá em Layout -> Adicionar Gadget -> HTML/JavaScript. Cole o código, e salve!
<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:'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>
 No início do código, onde há "URL DA SUA IMAGEM", troque o texto pela url da sua sua imagem. 


Para ajudar, trouxe vários botões 'Subir ao Topo'.

 



 

Para copiar a url da imagem, pressione o botão direito do mouse em cima da imagem que você escolheu, e clique em "Copiar url da imagem".

Gostaram do Tutorial? E dos botões? Se tiverem alguma dúvida, deixa um comentário no post que assim que puder, respondo. Beijo enorme e até o próximo post.

Postagem mais recente Postagem mais antiga

Você também vai gostar

64 comentários

  1. Vou tentar colocar depois haha

    Beijoos, Ana Carolina.
    http://simplesglamour.blogspot.com
    Instagram e Twitter: @simplesglamour

    ResponderExcluir
  2. Oi amore, obrigada pela visita lá no Blog.
    Adorei o tutorial, mas não consegui fazer.... :(
    Beijos.
    www.laiscristine.com

    ResponderExcluir
  3. Adorei o tutorial haha
    Beijos <3

    garotamodamh.blogspot.com

    ResponderExcluir
  4. Comigo não funcionou pra variar...poxa...fiz tudo certo e não apareceu. bjs

    ResponderExcluir
    Respostas
    1. Desculpa flor, acho que por causa da barra de rolagem o código deve ter alterado, discorri o código por completo na postagem e já testei. Agora sim vai funcionar!

      Excluir
    2. Flor, consegui...ha,ha...mais a imagem não aparece, acabei de criar meu blog ainda estou apanhando um bucadinho, sô...rsrsrsr... De qualquer modo, obrigada. Seus posts nos ajudam muitíssimo. Tem como fazer um com dicas de onde buscar imagens de looks e celebridades? bjs e obrigada! Uma semana abençoada pra vc.

      Excluir
    3. Ah, agora deu certo. obrigada querida sei que seus posts levam tempo e dão trabalho, mais o resultado do seu esforço tem me ajudado, pra ser justa, nos ajudado muito. bjs

      Excluir
  5. Respostas
    1. Consertei o que havia de errador. Tente novamente pois agora está funcionando *_*

      Excluir
  6. Olá o meu pareceu mas ele não subiu :( Eu tinha escolhido o do beijo.

    ResponderExcluir
    Respostas
    1. Qual teu blog pra eu dar uma olhada?

      Excluir
    2. Olá querida Camila, o meu aconteceu a mesma coisa: apareceu mais não estava subindo :/ ai começei a pensar no que podia está errado, e decidir visualizar como um leitor de fora, como meus leitores iriam ver e pronto! Funcionou! kkk Sabe o que era? era porque eu fui tentar fazer ele funcionar em modo de visualização do blogger e lá geralmente não funciona essas coisas rsrs Morri de rir comigo! Acho que começar um blog tem muuuuito dessas coisas! Caramba, que tutorial simples e maneiro, amei! Muito obrigada mesmo e olha como ficou *-* : http://aquelalablog.blogspot.com.br/
      Adorei! beijos ♥

      Excluir
  7. Adorei, pegei quase tudo ^^ brincadeira, seguindo.
    http://hime-samadesu.blogspot.com.br

    ResponderExcluir
  8. Peguei Lindona

    www.falhandonopeso.blogspot.com

    ResponderExcluir
  9. Mihg, no meu quando eu coloco funciona direitinho, mas o slide de destaques trava e não carrega as fotos, e eu uso um template seu, tem solução? beijoss
    www.aperfeccionista.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá Lais, não tenho conhecimento desse bug, vou tentar instalar usando um template meu e depois volto aqui pra dá te dar um retorno.

      Excluir
  10. Amei esse tutorial :)
    Muito bom. Parabens.


    batepapodecolega.blogspot.com

    ResponderExcluir
  11. adorei os botaozinhos, troquei tudo no blog template botao do topo, seus tutoriais sao facieis e lindos

    ResponderExcluir
  12. Amei, vou tentar.


    borboletafeitoflor.blogspot.com.br

    ResponderExcluir
  13. Ola, bom dia! a minha figura nao aparece, fica como falha na imagem.. da pra pegar qualquer imagem do pc ou tem que ser essas, nao to conseguindo com as suas...
    bjo
    deborahcarvalhomakeprofissional.blogspot.com

    ResponderExcluir
  14. Adorei seu blog linda,os botões foram muito uteis,obrigada. ♥

    http://shesblack.blogspot.com.br/

    ResponderExcluir
  15. peguei o botão hehe
    lindaeperfeitta.blogspot.com.br

    ResponderExcluir
  16. adorei conhecer seu blog! estou com um blog novo e estou fazendo alguns testes e gostei das dicas que você coloca aqui!

    agora além de visitar o seu blog por essas dicas, tbm vou visitá-lo por ser um blog de moda, e adoro!

    ResponderExcluir
  17. Outra coisa que eu estava precisando para o meu novo lay :) adorei

    ResponderExcluir
  18. Ameei obg :)
    http://coisinhasdacup.blogspot.com.br/

    ResponderExcluir
  19. Me ajudou muito!

    http://eucurtoliteratura.blogspot.com.br/

    ResponderExcluir
  20. Olá Camila! Amei o tutorial, mas será que vc sabe como faço para que meu botão topo apareça um pouco mais acima, para não fica atrás da barra?!
    Bjus

    http://simplesmentelilly.blogspot.com.br/

    ResponderExcluir
  21. Obrigada pelo post, eu estava precisando fofa! :D
    Dá uma olhada nos meus escritos? http://escritos-de-uma-garota.blogspot.com.br/
    Bjs :*

    ResponderExcluir
  22. Adorei o tutorial e as imagens! Estou usando uma, os créditos estão na pagina 'sobre' do blog. Só não usei o código porque uso o wordpress então estou usando um plugin para ter esse botão :D

    ResponderExcluir
  23. Obrigada pela dica !! Ajudou bastante.

    http://explorandoasgalaxias.blogspot.com.br/

    ResponderExcluir
  24. Peguei Linda obrigada pela dica! Ajudou bastante.
    http://diamondblacksos.blogspot.com.br/

    ResponderExcluir
  25. Perfeito!! peguei o ultimo.
    http://ideiaseflores.blogspot.com.br/

    ResponderExcluir
  26. Perfeito! Obrigada pelo tutorial e pelos botões, ficou show de bola! Foi o tutorial mais fácil que encontrei e mais bonito, parabéns!!

    http://www.conversadiaria.hol.es/

    ResponderExcluir
  27. oobrg ajudou muito!
    http://cafe-com-bolinhos.blogspot.com.br/

    ResponderExcluir
  28. Adorei. Obrigada me ajudou muito.Já estou usando no meu novo layout!

    http://unicadica.blogspot.com

    ResponderExcluir
  29. Amei a dica... Esse blog fica sempre guardado nos meus favoritos!
    www.renatamassa.blogspot.com

    ResponderExcluir
  30. Obrigada, ficou ótimo! Bjs!
    http://milkshakedepalavrasdalu.blogspot.com.br/

    ResponderExcluir
  31. ficou perfeito obg
    http://carinhasdemeninas.blogspot.com.br/

    ResponderExcluir
  32. muito obrigada tutorial simples me ajudou muito!

    ResponderExcluir
  33. aiii o meu deu certo obrigado pela a dica amore.
    bjokas.

    ResponderExcluir
  34. Nossa! super valeu !! rsrs :D
    ameiii <3

    ResponderExcluir
  35. Adoreei o post ! Estou começando agora e me ajudou muito! Obrigada! *-*
    http://poseseafins.blogspot.com.br/

    ResponderExcluir
  36. Oi, obrigada pelo tutorial, venha me visita. Bjos

    ResponderExcluir
  37. A-DO-REI!!!!! peguei o do coração escrito Topo! tá la no meu blog, se quiserem vão lá dar uma olhadinha, vai ajudar muito :)

    ResponderExcluir
  38. Obrigadaa!! Me ajudou muito.

    http://sistersohair.blogspot.com.br/

    ResponderExcluir
  39. ótimo post!vou pegar um emprestado rssr

    ResponderExcluir
  40. Talvez seja tarde para postar esse comentario mas... EU AMEEEEEEEI *--* , Super funcionou , usei o do beijo , to encantada *-* ' . Obrigadaa <3 , sou iniciante, e tinha duvidas sobre isso, e vc ajudou muito ! Sucesso !

    ResponderExcluir
  41. Muito bom, obrigada! <3

    http://vaidadeediamantes.blogspot.com.br/

    ResponderExcluir
  42. Obrigada, ajudou bastante! Já coloquei o botão no blog *--*
    http://coisinhasaleatorias.blogspot.com.br/

    ResponderExcluir
  43. No meu blog fiz tudo direitinho e deu super certo .😉
    http://blogrosasdeseda.blogspot.com.br

    ResponderExcluir
  44. Muito bom :D vou tentar
    http://perola-negra1.blogspot.com

    ResponderExcluir
  45. Amei flor da uma passadinha no meu blog peguei umas dicas suas <3
    Comecei a fazer postagens a pouco tempo.

    http://capettinesucre.blogspot.com.br/

    ResponderExcluir

Não deixe de comentar!
Sua opinião é muito importante para mim :D
Beijos...

Rolando no Blog!

Post em destaque ♡

Caixotes de feira na decoração

Se tem uma coisa que adoro fazer, é arte! <3 Me amarro em decoração, principalmente quando se trata de transformar lixo em artigos su...

Mais lidos da Semana