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

About Author

Designer na Inlove Design e artesã na Contém Fofura. Geek, metida a artista e ama coisas fofas.

54 Comments

  • Sabrina Amorim
    23 janeiro 2015 at 10:37

    Obrigada por fazer o tutorial Karol !
    Ajudou muito. Beijos

    Reply
  • Isabelle Campos
    23 janeiro 2015 at 16:49

    A verdade é que todos me encantaram muito… Tipo assim se eu tivesse que rejeitar um, eu rejeitaria nenhum ^^ Afinal, são todos muito encantadores… Que talento amiga o/ Já sabia a como colocar, mas foi muito bom ver de novo >,<
    http://docebunny.blogspot.com.br/

    Reply
  • Gabriela
    23 janeiro 2015 at 21:05

    Aimw Amei Ameiii,Parabéns!!

    Reply
  • Kaa Martins
    23 janeiro 2015 at 22:11

    A-M-O seu blog, você já está no meu blog roll beeeijos linda vc é muito talentosa!

    Reply
  • Lara Kneip
    24 janeiro 2015 at 1:23

    Amei! Já coloquei no meu blog. hehe <3

    Reply
  • Bárbra Mac
    25 janeiro 2015 at 16:41

    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 *-*

    Reply
    • Karoline
      27 janeiro 2015 at 1:24

      Oi Bárbra, obrigada! São os comentários padrão do WordPress.
      Bjs

      Reply
      • Bárbra Mac
        27 janeiro 2015 at 13:33

        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

        Reply
  • Juliana
    27 janeiro 2015 at 15:52

    Karol, muito obrigada por esse e por todos os tutoriais <3
    Graças a você tô conseguindo personalizar mais o blog!
    Beijos

    Reply
  • Taina
    28 janeiro 2015 at 23:24

    Karoline , quero dizer que amo o seu trabalho e que ajuda muita gente que não entende nada sobre HTML ( Prazer , eu ! ) Super Beijo :* ♥♥♥

    Reply
  • Thallyta Roberta
    29 janeiro 2015 at 17:30

    Amei e já estou usando…

    http://snowdreamfof.blogspot.com.br/

    Reply
  • Viviane Silva
    29 janeiro 2015 at 17:04

    Carol no wordpress cola o codigo na onde?
    Eu coloquei na folha de estilos e não deu certo.

    Reply
    • Guilherme
      6 janeiro 2016 at 15:55

      Então, intrometendo rs … Você tem que adicionar em um GADGET DE TEXTO O CÓDIGO !

      Reply
  • Millena
    30 janeiro 2015 at 17:19

    Amo seu blog , tem várias dicas e coisas legais , além disso ele é lindo !! Da uma passada lá no meu também *-* beijão !!

    Reply
  • Mayra
    1 fevereiro 2015 at 18:56

    Olá Karoline! Adorei os botões!
    Eu estou usando o layout que você disponibilizou grátis aqui, espero que não tenha problemas, pois mudei as cores e algumas coisinhas, mas com os devidos créditos, claro.

    Pode ver como ele ficou>>
    http://distractionsofaagirl-oficial.blogspot.com.br/

    bjão

    Reply
  • Alanna Oliveira
    2 fevereiro 2015 at 18:43

    Heey, muito legal o post, eu ja tenho adicionado no meu blog e ficou bem legal. Então eu te marquei para fazer uma Tag no meu blog ela é bem divertida, então se você quiser fazer o link do meu blog estará abaixo do comentário! Beijokas amore ♥

    By | http://umajoveminocente.blogspot.com.br/

    Reply
  • Camila
    2 fevereiro 2015 at 23:56

    Nossa, muito obrigado! Você está me ajudando muito com meu blog ♥

    Reply
  • Camila | Blog da Camila
    3 fevereiro 2015 at 12:52

    Que bloguinho lindo, Karol! Seus tutoriais estão me ajudando demais, já que estou personalizando meu blogger. Super obrigada! Um beijo.

    Reply
    • Karoline
      6 fevereiro 2015 at 16:27

      Oi Camila, obrigada por comentar! Fico feliz em ajudar.
      Um beijo!

      Reply
  • Isabelle Campos
    3 fevereiro 2015 at 13:27

    Amei todos os modelinhos ^^

    Reply
  • Isabelle Pegado
    3 fevereiro 2015 at 23:07

    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!!

    Reply
    • Karoline
      6 fevereiro 2015 at 16:26

      Oi Isabelle, muito obrigada! :)
      Um beijo

      Reply
  • Laura
    10 fevereiro 2015 at 16:23

    Olá! ^^

    Eu fiz uma tag no meu blog, se chama 8 coisas e queria recomendá-la pra você, caso você queira ver, o link é esse: Tag: 8 coisas

    Kissus, ^3^ | http://reviravoltateen.blogspot.com/

    Reply
  • Estefany Baptista
    10 fevereiro 2015 at 23:36

    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)

    Reply
  • Tainá Barreto
    11 fevereiro 2015 at 20:11

    Olá!
    Sou blogueira de "primeira viagem" e não entendo quase nada sobre layout. Como faço para extrair os freebies? Aguardo uma resposta. Desde já, agradeço.

    Reply
  • Bianca
    13 fevereiro 2015 at 22:26

    Adorei Karol! Sou apaixonada por seus tutoriais! Ficou lindo no meu blog!
    Beijinho!

    Reply
  • Bia Reys
    14 fevereiro 2015 at 19:33

    Ahh, me apaixonei pelo seu blog. sempre fui péssima em html, css, etc…mas com seus tutotiais, a coisa fica mais fácil de mexer.♥

    http://www.blreys.com.br/

    Reply
  • Camila Chrispino
    19 fevereiro 2015 at 0:03

    Estou usando, ficou fofo

    Reply
  • Tainá Barreto
    22 fevereiro 2015 at 19:43

    Olá!
    Sou blogueira de “primeira viagem” e não entendo quase nada sobre layout. Como faço para extrair os freebies? Aguardo uma resposta. Desde já, agradeço.

    Reply
  • Tainá Barreto
    22 fevereiro 2015 at 19:43

    Olá!
    Sou blogueira de “primeira viagem” e não entendo quase nada sobre layout. Como faço para extrair os freebies? Aguardo uma resposta. Desde já, agradeço.

    Reply
  • Alice Andrade
    22 fevereiro 2015 at 22:42

    Quando você abrir no winrar, vai ter lá em cima, extrair, ai você seleciona os pngs, clica no extrair e seleciona a pasta..

    Reply
  • Alice Andrade
    22 fevereiro 2015 at 22:43

    Já estou usando, adorei!

    Reply
  • Aline Molleri
    5 março 2015 at 17:50

    Muito obrigada pela dica MESMO, já apliquei no meu blog. http://www.hipermetropiafashion.com.br

    Reply
  • Rafaela
    30 março 2015 at 11:25

    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 :)

    Reply
  • Nicoly Lopes Santana
    7 junho 2015 at 13:04

    ameii muito obrigado conseguir fazer
    http://bloggersonhosdemenina.blogspot.com.br/

    Reply
  • Francine Porfirio
    9 junho 2015 at 17:29

    ADOREI! Muito obrigada. Já estou usando. :D
    Seus tutoriais são muito fáceis de compreender. Estou feliz por ter encontrado seu blog.

    Reply
  • Arissandra Silva Silva
    9 junho 2015 at 20:25

    Aprendendo várias coisas aqui no seu blog , ta me ajudando muito. Obrigada.

    Reply
  • Gabi Ribeiro
    19 julho 2015 at 17:24

    Mais um tutorial dessa lindeza que coloco no blog e funciona perfeitamente!! Obrigada por compartilhar essas dicas com a gente, Karoline!! :**

    Reply
  • Marcelle Medeiros
    7 agosto 2015 at 21:42

    AMEI! ;3

    Reply
  • Camila
    22 outubro 2015 at 10:54

    Só para dizer que amo seu blog e suas dicas. <3 muito sucesso pra você http://www.semroupaprasair.com

    Reply
  • Alice
    15 dezembro 2015 at 16:21

    Não consegui hospedar no picasa,pode hospedar no tumblr?
    bjs e sucesso!

    Reply
  • Vivianne
    21 dezembro 2015 at 1:11

    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!

    Reply
  • Cinthia Rafaelle
    2 janeiro 2016 at 22:44

    Obrigada Karol!
    Amo mto seu blog e amo os templates q vc disponibiliza, inclusive eu uso um dos seus no meu *-* ^^

    Reply
  • Giooh Oliveira
    17 janeiro 2016 at 19:53

    Oi Karol, gostei muito do ‘Voltar ao topo 2’. Posso alterar a cor dele? Pois, essa cor atual não está combinando com o padrão de cores do meu blog.

    Reply
  • kelly fernandes
    31 março 2016 at 1:59

    Ficou ótimo,botei no meu blog responsivo e ele assumiu a forma do meu layout direitinho,amei ,combinou com tudo.

    Reply
  • Carla
    13 maio 2016 at 19:47

    Muito obrigada por estar aqui <3 sério! Graças a você, meu blog tá com a minha carinha. Beijão!

    Reply
  • Lais
    2 junho 2016 at 15:58

    Muitooo obrigada mesmo!! Me ajudou para não só deixar o blog do meu jeito mas entender como fazer isso haha!
    Beijos sucesso!

    Reply
  • Kelen
    27 junho 2016 at 12:59

    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.

    Reply
    • Karoline
      22 julho 2016 at 15:19

      Oi Kelen, fico imensamente feliz em saber! ♥ Muito obrigada por comentar!

      Reply
  • Antonia Farias
    9 julho 2016 at 15:53

    Amei, amei deu super certo no blog, obrigada.

    Reply
  • valeria angel
    18 junho 2017 at 21:35

    Amei o melhor que vi até agora,ficou massa,obrigada linda por disponibilizar pra gente.

    Reply
    • Karoline
      24 junho 2017 at 1:04

      Obrigada, Valeria! :)

      Reply

Leave a Reply

asya-bahis.net -
vdcasino
-

gizabet giriş

- megapari giriş -

maltbahis giriş

-
kolaybet giriş linki
-

redwin1.club

-
süperbetin yeni adres
-
casinomavi.net
-

Sağlık Sen

- eskişehir eskort - eskort eskişehir - eskort - escort - bursa eskort