Como adicionar boto Voltar ao topo no Blog

A criao de um blog feita pensando nas facilidades e ferramentas que

sero disponibilizadas para seus leitores, assim os internautas que
acessarem a pgina podero visualizar os contedos inseridos de forma
rpida e com determinados botes que podem auxiliar na navegao.
O Blogger oferece uma variedade de opes para a insero em
blogs e personalizao dos mesmos, principalmente com a possibilidade de
alterao do cdigo HTML e incluso de gadgets, assim como o boto
Volta ao topo.

Funcionalidade do boto Voltar ao topo

O boto Voltar ao topo uma facilidade que podemos
disponibilizar para os leitores do blog que podem voltar diretamente ao
comeo do site em cada uma das postagens, sem a necessidade de rolar a
barra at chegar ao incio.
Ao final de cada post exibido o boto Voltar ao topo, assim
em todos os contedos o mecanismo estar disponvel para os internautas.

Aqui ( modelos de boto voltar ao topo ) voc ter acesso a vrias imagens
que o Blog Universo das Dicas disponibiliza para voc, caso utilize alguma
dessas imagens, deixe um comentrio com o endereo do blog para que eu
possa fazer uma visitinha e v com ficou, no deixe de comentar, afinal s
isso que peo ao voc utilizar uma das minhas imagens ( proibido
redistribuir essas imagens)
Como adicionar boto Voltar ao topo
A ferramenta para insero do boto Voltar ao topo o gadget
que pode ser inserido rapidamente no Blogger, com a incluso do cdigo
HTML especfico para determinada ao, alterando o layout.

Para inserir o boto Voltar ao topo necessrio:

1.
Acessar o Blogger: Entre com seu login e senha para realizar as
alteraes no blog de sua escolha, optando-o pelo ttulo da pgina.

2.
Entre em Layout: Acesse, na menu lateral do blog, a opo
Layout e, em seguida, Adicionar um Gadget, selecionando o
complemento desejado que, neste caso o HTML/JavaScript"

3.
Cole o cdigo: O HTML que deve ser inserido na caixa do gadget
indicado :

CDIGO IMAGEM VOLTAR AO TOPO

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img

src=" URL DA IMAGEM" border="0" /></a></div>

4.
Acrescente a imagem: possvel inserir uma imagem descrita
como Voltar ao topo com animaes ou estticas, personalizando ainda
mais seu blog. Para isto necessrio hospedar a imagem em algum site
para obter seu link, veja o post onde hospedar imagens na internet
substituindo a frase LINK DA IMAGEM no HTML pelo link da sua
imagem. Voc tambm pode conferir em nossa galeria de imagens voltar ao
topo se tem alguma que te agrade. Imagens Voltar Ao topo Para Blog

Alm do boto Voltar ao topo simples, que redireciona o usurio

diretamente para o incio da pgina, tambm possvel inserir uma opo
de boto deslizante, ou seja, que percorre o site inteiro antes de chegar ao
comeo dos contedos.
Para inserir o boto Voltar ao topo deslizante necessrio seguir os
dois primeiros passos citados acima, colando este cdigo em vez do
outro cdigo acima:
CDIGO IMAGEM VOLTAR AO TOPO DESLIZANTE

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scrip
t>
<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=" <div style="position:fixed; bottom:0px;
right:0px;"><a href="#"> <img src="https://3.bp.blogspot.com/GhpDMPsdREI/V6ZU_wK1Z9I/AAAAAAAAAJo/8gPz1ecZSS0eRk2yuvmVeoR3vJIFCZ3gCLcB/s1600/Voltar%2Bao%2Btopo%2Bcoruja.png"
border="0" />
</a></div>
"/>', //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:'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>

Com este cdigo tambm possvel inserir uma imagem, procurando,

em meio ao cdigo, a frase LINK DA IMAGEM, Veja algumas das imagens
que temos disponvel para voc utilizar AQUI