Poner Botones Ir arriba e Ir abajo en blog de blogger con Jquery

Tomado gentilmente de Ciudad Blogger

Un post más hoy aprenderemos como poner los botones "Ir arriba" e "Ir abajo" en nuesto blog de blogger, la colocación de los mismos requiere de unos pocos pasos y nada del otro mundo para complicarnos.

 

Un demo de los botones lo podrás ver justo en este blog, en la parte izquierda inferior, así que si ya los viste vamos a ver como se implementan:

EL TUTORIAL 

1. Vamos a nuestro escritorio blogger, luego, edición HTML y buscamos ]]></b:skin> justo antes de él, pegaremos lo siguiente:

/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ywux9LQ1lNmxNO4AdmQD1OrsYeiZldG9IOcA3PMcabI9CettyXnCz4Gm6xBDcOZ8MCAsuwkmDUCnqVem7UHyRMVugJuojdv8agYaSvr9QYeQAiCq-nxuWFFFTAxazYg6VocWGAU2WVc/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij9hKgfv5UcK35KXQz-6zZ8wiegbKzAfNQQgdmzTJi08aLVvE8qKoATzjKhrUu0pJ9_qywZsvDSR7GP6nMYMeyaDu7jQ0esOodR7U_5u__uf-L926pwNoqtk0wCaRJN5qULJApSERfHcs/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

 2. Lo siguiente será buscar </body> y justo antes pegaremos lo siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_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');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Y ya estuvo sólo queda guardar nuestra plantilla y verificar que todo salga bien si en caso tal no se llegase a ver el efecto en corrida a lo mejor el problema radique en la versión de JQUERY que usas para ello pasate por este post. Para dar con una solución.

Lo que se encuentra en naranja en el primer código son los comentarios que te indican los valores que puedes cambiar a tu gusto para estos botones.

Es todo hasta la próxima,