Botão "Voltar ao topo" (9 modelos) | Follow your dreams
Blogosfera

Botão “Voltar ao topo” (9 modelos)

Oi pessoal,

Janeiro tem sido um mês super corrido, estou de férias da faculdade mas continuo trabalhando, então fico correndo pra entregar as encomendas sem deixar de curtir minha folguinha merecida. :)

Hoje trago pra vocês um tutorial de botão “Voltar ao topo” que serve tanto para WordPress quanto para Blogger (testei nos dois e deu certo!), e junto com ele trago também 9 opções gratuitas de botões pra vocês baixarem.

Botao Voltar Ao Topo 9 Modelos

Download aqui

 

  • 1 – Vá no seu painel do Blogger, clique em LAYOUT > Adicionar um Gadget > HTML/Java Script. Cole nele 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.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>

 

  • 2 – O download dos freebies é feito em um arquivo Winrar, então antes de tudo é necessário extrair. Depois faça o upload da imagem que você vai usar no seu álbum do Picasa Web.

 

  • 3 – Clique com o botão direito na imagem hospedada e selecione COPIAR URL DA IMAGEM. Esse URL deve ser incluído onde é indicado pela cor vermelha no código do passo 1.

 

  • 4 – Agora é só salvar o gadget e pronto, o botão já deverá aparecer no seu blog.

 

Qualquer dúvida comentem. Emoji5

54 Comentários

  1. Oii Karoline!!

    Por favor, faz um tutorial sobre como colocar o comentário da forma que está o seu… Com a opção de “endereço do blo” e as notificações diferentes

    Adoro o seu blog, e o modo como ensina. Bjs *-*

      1. Não acreditoo o.o
        E eu louca procurando como fazer esse tipo de comentário.
        Vou arrumar um jeito, to na plataforma do Blogger .. Pela primeira vez estou triste por isso kkkk

        Brigada mesmo assim. Bjs

  2. Karooool, linda! Adorei o seu blog! Hoje tirei o dia pra dar uma atualizada no meu e acabei topando com seu blog! Foi de muita ajuda pra deixar o meu mais bonitinho e prático! ♥ Obrigada, ficarei de olho nas atts por aqui! Sucesso!!

  3. Comecei meu blog recentemente e suas postagens me ajudaram bastante a entender como tudo funciona (risos), uso um template que você disponibilizou e gosto muito dele. Coloquei o ” Voltar o topo” de acordo como ensinou, porém ousei e fiz um para mim (risos)

  4. Karol, gostaria de saber como criar links para as páginas que vem logo depois do cabeçalho. Exemplo: Home / Sobre ou Sobre mim / Portfólio … como está no seu. Inclusive estou usando o seu template e coisitas mais. Sou blogueira de primeira viagem e já aprendi muito com seu blog. Parabéns!! Beijos :)

  5. Oi Linda, tenho visitado seu blog varias vezes por dia para deixar o meu blog mais bonitinho com suas dicas, que são maravilhosas.
    Hj tentei o download das imagens redondinhas para categoria e o download do voltar ao topo, mas esta indo para uma pagina de Pag Social, eu entro com meu facebook e ele volta para esta pagina, e não da em nada, o que pode estar acontecendo ou o que eu posso estar fazendo de errado?
    Beijos e muito obrigada por esses tutoriais que você faz!

  6. Menina, você é ótima no que faz! Parabéns pelo blog e pelas postagens! Conheci seu blog há três dias e já me ajudou muito, muito, muito mesmo. Muito sucesso pra você! Merece por ser tão dedicada.

Deixe uma resposta