Como adicionar botão “Voltar ao topo” no Blog




                A criação de um blog é feita pensando nas facilidades e ferramentas que serão disponibilizadas para seus leitores, assim os internautas que acessarem a página poderão visualizar os conteúdos inseridos de forma rápida e com determinados botões que podem auxiliar na navegação.
                O Blogger oferece uma variedade de opções para a inserção em blogs e personalização dos mesmos, principalmente com a possibilidade de alteração do código HTML e inclusão de gadgets, assim como o botão “Volta ao topo”.

Funcionalidade do botão “Voltar ao topo”

                O botão “Voltar ao topo” é uma facilidade que podemos disponibilizar para os leitores do blog que podem voltar diretamente ao começo do site em cada uma das postagens, sem a necessidade de rolar a barra até chegar ao início.
                Ao final de cada post é exibido o botão “Voltar ao topo”, assim em todos os conteúdos o mecanismo estará disponível para os internautas.


Aqui ( modelos de botão voltar ao topo ) você terá acesso a várias imagens que o Blog Universo das Dicas disponibiliza para você, caso utilize alguma dessas imagens, deixe um comentário com o endereço do blog para que eu possa fazer uma visitinha e vê com ficou, não deixe de comentar, afinal é só isso que peço ao você utilizar uma das minhas imagens (é proibido redistribuir essas imagens)


 Como adicionar botão “Voltar ao topo”

                A ferramenta para inserção do botão “Voltar ao topo” é o gadget que pode ser inserido rapidamente no Blogger, com a inclusão do código HTML específico para determinada ação, alterando o layout.

Para inserir o botão “Voltar ao topo” é necessário:


1.       Acessar o Blogger: Entre com seu login e senha para realizar as alterações no blog de sua escolha, optando-o pelo título da página.


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



Personalizar Blogger




3.       Cole o código: O HTML que deve ser inserido na caixa do gadget indicado é: 



CÓDIGO IMAGEM VOLTAR AO TOPO



<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="LINK DA IMAGEM" border="0" /></a></div>









4.       Acrescente a imagem: É possível inserir uma imagem descrita como “Voltar ao topo” com animações ou estáticas, personalizando ainda mais seu blog. Para isto é necessário 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ê também pode conferir em nossa galeria de imagens voltar ao topo se tem alguma que te agrade. Imagens Voltar Ao topo Para Blog




Além do botão “Voltar ao topo” simples, que redireciona o usuário diretamente para o início da página, também é possível inserir uma opção  de botão deslizante, ou seja, que percorre o site inteiro antes de chegar ao começo dos conteúdos.
Para inserir o botão “Voltar ao topo” deslizante é necessário seguir os dois primeiros passos citados acima, colando este código em vez do outro código acima:


CÓDIGO IMAGEM VOLTAR AO TOPO DESLIZANTE




<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=" LINK 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:'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 código também é possível inserir uma imagem, procurando, em meio ao código, a frase “LINK DA IMAGEM”, Veja algumas das imagens que temos disponível para você utilizar AQUI


9 comentários