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.
- 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.
54 Comments
Sabrina Amorim
23 janeiro 2015 at 10:37Obrigada por fazer o tutorial Karol !
Ajudou muito. Beijos
Isabelle Campos
23 janeiro 2015 at 16:49A 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/
Gabriela
23 janeiro 2015 at 21:05Aimw Amei Ameiii,Parabéns!!
Kaa Martins
23 janeiro 2015 at 22:11A-M-O seu blog, você já está no meu blog roll beeeijos linda vc é muito talentosa!
Lara Kneip
24 janeiro 2015 at 1:23Amei! Já coloquei no meu blog. hehe <3
Bárbra Mac
25 janeiro 2015 at 16:41Oii 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 *-*
Karoline
27 janeiro 2015 at 1:24Oi Bárbra, obrigada! São os comentários padrão do WordPress.
Bjs
Bárbra Mac
27 janeiro 2015 at 13:33Nã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
Juliana
27 janeiro 2015 at 15:52Karol, muito obrigada por esse e por todos os tutoriais <3
Graças a você tô conseguindo personalizar mais o blog!
Beijos
Taina
28 janeiro 2015 at 23:24Karoline , quero dizer que amo o seu trabalho e que ajuda muita gente que não entende nada sobre HTML ( Prazer , eu ! ) Super Beijo :* ♥♥♥
Thallyta Roberta
29 janeiro 2015 at 17:30Amei e já estou usando…
http://snowdreamfof.blogspot.com.br/
Viviane Silva
29 janeiro 2015 at 17:04Carol no wordpress cola o codigo na onde?
Eu coloquei na folha de estilos e não deu certo.
Guilherme
6 janeiro 2016 at 15:55Então, intrometendo rs … Você tem que adicionar em um GADGET DE TEXTO O CÓDIGO !
Millena
30 janeiro 2015 at 17:19Amo seu blog , tem várias dicas e coisas legais , além disso ele é lindo !! Da uma passada lá no meu também *-* beijão !!
Mayra
1 fevereiro 2015 at 18:56Olá 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
Alanna Oliveira
2 fevereiro 2015 at 18:43Heey, 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/
Camila
2 fevereiro 2015 at 23:56Nossa, muito obrigado! Você está me ajudando muito com meu blog ♥
Camila | Blog da Camila
3 fevereiro 2015 at 12:52Que bloguinho lindo, Karol! Seus tutoriais estão me ajudando demais, já que estou personalizando meu blogger. Super obrigada! Um beijo.
Karoline
6 fevereiro 2015 at 16:27Oi Camila, obrigada por comentar! Fico feliz em ajudar.
Um beijo!
Isabelle Campos
3 fevereiro 2015 at 13:27Amei todos os modelinhos ^^
Isabelle Pegado
3 fevereiro 2015 at 23:07Karooool, 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!!
Karoline
6 fevereiro 2015 at 16:26Oi Isabelle, muito obrigada! :)
Um beijo
Laura
10 fevereiro 2015 at 16:23Olá! ^^
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/
Estefany Baptista
10 fevereiro 2015 at 23:36Comecei 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)
Tainá Barreto
11 fevereiro 2015 at 20:11Olá!
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.
Bianca
13 fevereiro 2015 at 22:26Adorei Karol! Sou apaixonada por seus tutoriais! Ficou lindo no meu blog!
Beijinho!
Bia Reys
14 fevereiro 2015 at 19:33Ahh, 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/
Camila Chrispino
19 fevereiro 2015 at 0:03Estou usando, ficou fofo
Tainá Barreto
22 fevereiro 2015 at 19:43Olá!
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.
Tainá Barreto
22 fevereiro 2015 at 19:43Olá!
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.
Alice Andrade
22 fevereiro 2015 at 22:42Quando você abrir no winrar, vai ter lá em cima, extrair, ai você seleciona os pngs, clica no extrair e seleciona a pasta..
Alice Andrade
22 fevereiro 2015 at 22:43Já estou usando, adorei!
Aline Molleri
5 março 2015 at 17:50Muito obrigada pela dica MESMO, já apliquei no meu blog. http://www.hipermetropiafashion.com.br
Rafaela
30 março 2015 at 11:25Karol, 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 :)
Karoline
30 março 2015 at 14:09Oi Rafaela, não sei se entendi sua pergunta, seria criar as páginas? Se você estiver usando Blogger dá uma olhada nesse artigo: https://support.google.com/blogger/answer/165955?hl=pt-BR
Um beijo! :)
Rafaela
3 abril 2015 at 14:10karol, obrigada!! Foi, exatamente isso que eu queria. Meu blog ficou show de bola! :)
Nicoly Lopes Santana
7 junho 2015 at 13:04ameii muito obrigado conseguir fazer
http://bloggersonhosdemenina.blogspot.com.br/
Francine Porfirio
9 junho 2015 at 17:29ADOREI! Muito obrigada. Já estou usando. :D
Seus tutoriais são muito fáceis de compreender. Estou feliz por ter encontrado seu blog.
Arissandra Silva Silva
9 junho 2015 at 20:25Aprendendo várias coisas aqui no seu blog , ta me ajudando muito. Obrigada.
Gabi Ribeiro
19 julho 2015 at 17:24Mais um tutorial dessa lindeza que coloco no blog e funciona perfeitamente!! Obrigada por compartilhar essas dicas com a gente, Karoline!! :**
Marcelle Medeiros
7 agosto 2015 at 21:42AMEI! ;3
Camila
22 outubro 2015 at 10:54Só para dizer que amo seu blog e suas dicas. <3 muito sucesso pra você http://www.semroupaprasair.com
Alice
15 dezembro 2015 at 16:21Não consegui hospedar no picasa,pode hospedar no tumblr?
bjs e sucesso!
Vivianne
21 dezembro 2015 at 1:11Oi 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!
Cinthia Rafaelle
2 janeiro 2016 at 22:44Obrigada Karol!
Amo mto seu blog e amo os templates q vc disponibiliza, inclusive eu uso um dos seus no meu *-* ^^
Giooh Oliveira
17 janeiro 2016 at 19:53Oi 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.
kelly fernandes
31 março 2016 at 1:59Ficou ótimo,botei no meu blog responsivo e ele assumiu a forma do meu layout direitinho,amei ,combinou com tudo.
Carla
13 maio 2016 at 19:47Muito obrigada por estar aqui <3 sério! Graças a você, meu blog tá com a minha carinha. Beijão!
Lais
2 junho 2016 at 15:58Muitooo obrigada mesmo!! Me ajudou para não só deixar o blog do meu jeito mas entender como fazer isso haha!
Beijos sucesso!
Kelen
27 junho 2016 at 12:59Menina, 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.
Karoline
22 julho 2016 at 15:19Oi Kelen, fico imensamente feliz em saber! ♥ Muito obrigada por comentar!
Antonia Farias
9 julho 2016 at 15:53Amei, amei deu super certo no blog, obrigada.
valeria angel
18 junho 2017 at 21:35Amei o melhor que vi até agora,ficou massa,obrigada linda por disponibilizar pra gente.
Karoline
24 junho 2017 at 1:04Obrigada, Valeria! :)