Como Adicionar Botões Ir ao Topo e Descer no Blogger

Adicione em seu blog os botões ir ao topo e descer e deixe sua página mais dinâmica.

Pense naqueles blogs que têm páginas bem longas, com textos e/ou outros artigos bem vastos às vezes nem todos gostam de lê-las até o final. Se você tem um blog com essa característica trazemos uma opção que pode ajudar seus visitantes a subir/descer as páginas mais rapidamente.

Nesse tutorial mostraremos como colocar aquelas setinhas para ir ao topo e descer em seu blog. Como já dito anteriormente será uma boa opção para que os visitantes tenham a possibilidade de uma navegação mais rápida e dinâmica e não sejam obrigados a ver aquilo que não querem. Explicaremos também a possibilidade de personalizar com imagens de setas a seu gosto que caso você já as tenha poderá usá-las ou caso ainda não possua poderá cria-las em um editor de imagens de sua preferência.

E então era essa opção que você estava precisando? Veja a seguir como é simples de colocar em seu blog e configurar.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Tutorial

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

 /* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRLn8qdB3e62Oav9w4fU0z6_mIBTE083NsGHNVrhNazPyYS42hvXq0Cu6w0MEDzsZJ8wVm6KglxbS9bG61eMnSPXqV3gs2yJaM879YbpkQE8jO56Hkx-ojufvE2I7ZqAB6IwT-HPV0vkA/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXPZA5xvtfZgEpHUgmtQcTHJOd6hLy_OsjK52ejS9lbtRFqsWb99-wBYFh9AHsndTbipY78ovqsZMdEf6PFG0ZafJOThrHTUopNqJaYC6LkjYAd9bURn0m9CzjBANkWy3VCGsGSA95tQ/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Configuração:
* Em VERMELHO são as imagens das setas, altere caso desejar;
* Em AZUL são as cores de fundo (branco), altere caso desejar.

>> Pesquise agora por </body>

>> Logo ACIMA da tag encontrada cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.