05 dezembro 2014

Dicas e Tutorial:Como colocar botão voltar ao topo que só aparece depois de rolar a página

Oi gente tudo bem :)
Hoje temos: 




Olá meninas! 
O tuto que vou ensinar hoje é mega fácil e muito fofo para o blog! Vou ensinar a colocar um botão de voltar ao topo. Talvez muitas já saibam como fazer isso, mas vai ficar valendo pra quem não sabia.. Vamos lá?

Primeiro Passo:

Vá no google imagens e pesquise por Fundo Png Transparente.
Pegue a primeira imagem que aparecer e salve no seu computador. Abra o Photoshop, ou qualquer outro editor de imagens que você use, selecione o Png que você salvou, e faça seu botão.

Esse botão só vai aparecer quando você rolar a página para baixo. Quando a página esta no topo, ele não aparece, porque no topo não tem como voltar ao topo né? rsrsrs.. Então ele só aparece depois que você rola a página o que eu acho mais fofo ainda! O meu eu fiz com o ícone da minha fan page, vejam como é:



Você pode escrever: Subir, Topo, Voltar ao Topo, ou apenas colocar uma imagem de seta. Vou deixar algumas imagens pra vocês usarem, vejam abaixo:
     

Se vocês quiserem utilizar outras imagens basta pesquisar pelo google imagens mas tomando sempre o cuidado de verificar se a imagem está em formato PNG (com o fundo transparente).

Agora vamos ao código! Hoje, não tem nada de mecher no Html do blog rsrs.. 

Segundo Passo:

Depois da sua imagem pronta, vá ao site Tinypic e hospede sua imagem. Clique no botão enviar agora e escreva a verificação de palavras, quando aparecer os códigos, copie onde está escrito: Link direto para Layouts.
Cole esse link no bloco de notas e deixe lá.

Terceiro Passo:

Abra o seu blog, clique em Layout, clique em adicionar um gadget, depois clique em Html, e cole o código  que vou deixar abaixo. Depois que você colar ele lá, pegue o link que estava no bloco de notas e cole onde esta escrito: URL DA SUA IMAGEM AQUI. E é só salvar! Vou deixar o 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" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.mijadinhapost.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL DA SUA IMAGEM AQUI"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom 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:'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>

Fácil né meninas:)
Espero que tenham gostado e até o próximo tuto! 
Beijos

Vocês podem me Encontrar aqui:


Blog: Conto de Fadas         e    


Espero que tenha  gostado :)

Bjinhos :)
  






16 comentários:

  1. Bacana a iniciativa de ajudar os blogueiros. Parabéns.
    Bjão

    SORTEIO DE NATAL LÁ NO BLOG, VEM PARTICIPAR!!!
    http://blogdajeu.com.br/presente-de-natal-concurso-com-bella-mulher-shopping-das-maquiagens/

    ResponderExcluir
  2. O botão que tenho no meu blog já veio junto com o layout que eu ganhei em um blog em um sorteio, hehe. Mas gostei de saber como é
    Beijos

    ResponderExcluir
  3. Gosto muito do volta ao topo
    acho que fica lindo e facilita
    a leitura no blog

    Lindo Noite
    beijokas da Nanda

    Mamãe de Duas
    Google+Nanda

    ResponderExcluir
  4. Gostei vou tentar fazer bjos!!!
    Mil bjos S2
    http://maedemeninoeusou.blogspot.com.br/

    ResponderExcluir
  5. Super dica hein!
    bjcas
    www.estou-crescendo.com

    ResponderExcluir
  6. Eu não sabia colocar, no meu blog tem um lindinho demais, mas não foi eu quem colocou.

    www.jessalem.blogspot.com.br

    ResponderExcluir
  7. Bacana isso de ajudar outras blogueiras, não é facil mexer em Código HTML mas a gente acostuma, kkk
    Abraços!
    www.pipocasemaquarela.com

    ResponderExcluir
  8. Excelentes dicas, usei o blogger por muito tempo, agora optei pelo WP. Beijos
    Cléo
    http://www.eueosgemeos.com/

    ResponderExcluir
  9. Adoro seus tutorias e suas dicas, parabéns Letícia!
    Beijos!
    islary34.blogspot.com

    ResponderExcluir
  10. Estou adorando as dicas da Letícia, obrigada por compartilhar mais essa dica!
    Beijos!
    www.mahmaquiagens.blogspot.com.br

    ResponderExcluir
  11. adorei, não é difícil de fazer. Vou ver se consigo.
    Beijos

    ResponderExcluir
  12. Nossa esse tutorial é muito útil! Eu sempre preciso mexer no meu templante para fazer alguma coisa!! Queria até para pedir como faz para colocar cor no rodapé do blog procuro esse tutorial e nunca acho!!
    linda semana!
    bjos

    http://www.divaemaquiada.com.br/

    ResponderExcluir
  13. Parabéns por compartilhar .. dicas e ajuda para nossa melhoria são sempre bem vindas .. Depois com mais calma vou tentar fazer ...

    Bjs Mi Gobbato
    http://espacodasmamaes.blogspot.com.br/

    ResponderExcluir

Sejam todos bem vindos!
Deixe seu comentário ele é o que alimenta meu cantinho :)
Vou ler com carinho e responder com alegrias
Bjinhos a todos

Leteia Bispo